javascript - w3schools - siblings jquery




كيفية تقديم الطلب! مهم باستخدام.css()؟ (20)

3 أمثلة على العمل

كان لدي موقف مشابه ، لكنني استخدمت .find () بعد مجابهة مع .closest () لفترة طويلة مع العديد من الاختلافات.

رمز المثال

// allows contains fuction to work, ignores case sensitivity

jQuery.expr[':'].contains = function(obj, index, meta, stack){
result = false;
theList = meta[3].split("','");
var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
for (x=0;x<theList.length;x++) {
if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
return true;}} return false;};

$(document).ready(function() { var refreshId = setInterval( function() {
$("#out:contains('foo','test456')").find(".inner").css( 'width', '50px', 'important' );
}, 1000); //rescans every 1000ms
}); 

لبديل

$( '.inner' ).each(function () {
this.style.setProperty( 'height', '50px', 'important' );
});

$('#out').find('.inner').css({ 'height': '50px'});

حتى التصويت إذا وجدت أي استخدام ، وذلك بفضل.

العمل: http://jsfiddle.net/fx4mbp6c/

أواجه مشكلة في تطبيق أسلوب !important لقد حاولت:

$("#elem").css("width", "100px !important");

هذا لا يفعل شيئا . يتم تطبيق أي نمط العرض على الإطلاق. هل هناك طريقة jQuery-ish لتطبيق مثل هذا النمط دون الحاجة إلى استبدال cssText (مما يعني أنني سأحتاج إلى تحليله أولاً ، وما إلى ذلك)؟

تعديل : يجب أن أضيف أن لدي ورقة أنماط ذات نمط !important أحاول تجاوزه باستخدام نمط مضمّن ، لذا فإن استخدام .width() وما شابه لا ينجح لأنه يتم تجاوزه بواسطة النمط الخارجي !important .

أيضًا ، يتم حساب القيمة التي ستتجاوز القيمة السابقة ، لذلك لا يمكنني ببساطة إنشاء نمط خارجي آخر.


أعتقد أنني وجدت حلا حقيقيا. لقد جعلتها وظيفة جديدة:

jQuery.style(name, value, priority);

يمكنك استخدامه للحصول على القيم باستخدام .style('name') مثل .css('name') ، واحصل على CSSStyleDeclaration بـ .style() ، وقم أيضًا بتعيين القيم - مع إمكانية تحديد الأولوية كـ "مهم" . شاهد this .

عرض

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

وهنا الناتج:

null
red
blue
important

الوظيفة

(function($) {    
  if ($.fn.style) {
    return;
  }

  // Escape regex chars with \
  var escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
  };

  // For those who need them (< IE 9), add support for CSS functions
  var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
  if (!isStyleFuncSupported) {
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
      return this.getAttribute(a);
    };
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
      this.setAttribute(styleName, value);
      var priority = typeof priority != 'undefined' ? priority : '';
      if (priority != '') {
        // Add priority manually
        var rule = new RegExp(escape(styleName) + '\\s*:\\s*' + escape(value) +
            '(\\s*;)?', 'gmi');
        this.cssText =
            this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
      }
    };
    CSSStyleDeclaration.prototype.removeProperty = function(a) {
      return this.removeAttribute(a);
    };
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
      var rule = new RegExp(escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?',
          'gmi');
      return rule.test(this.cssText) ? 'important' : '';
    }
  }

  // The style function
  $.fn.style = function(styleName, value, priority) {
    // DOM node
    var node = this.get(0);
    // Ensure we have a DOM node
    if (typeof node == 'undefined') {
      return this;
    }
    // CSSStyleDeclaration
    var style = this.get(0).style;
    // Getter/Setter
    if (typeof styleName != 'undefined') {
      if (typeof value != 'undefined') {
        // Set style property
        priority = typeof priority != 'undefined' ? priority : '';
        style.setProperty(styleName, value, priority);
        return this;
      } else {
        // Get style property
        return style.getPropertyValue(styleName);
      }
    } else {
      // Get CSSStyleDeclaration
      return style;
    }
  };
})(jQuery);

انظر this للحصول على أمثلة حول كيفية قراءة وضبط قيم CSS. كانت مشكلتي هي أنني قمت بالفعل بتعيين !important بالنسبة للعرض في CSS الخاص بي لتجنب حدوث تعارض مع CSS موضوع آخر ، ولكن أي تغييرات قمت بها على العرض في jQuery لن تتأثر لأنها ستتم إضافتها إلى سمة النمط.

التوافق

للإعداد باستخدام الأولوية باستخدام وظيفة setProperty ، تنص هذه المقالة على وجود دعم لـ IE 9+ وجميع المستعرضات الأخرى. لقد حاولت مع IE 8 وفشلت ، وهذا هو السبب في أنني بنيت الدعم لها في وظائفي (انظر أعلاه). ستعمل على جميع المتصفحات الأخرى باستخدام setProperty ، ولكنها ستحتاج إلى رمز مخصص للعمل في <IE 9.


أفترض أنك حاولت ذلك دون إضافة مهمة؟
css المضمن (وهو كيف يضيف js styling) يتجاوز stylesheet css. أنا متأكد من أن هذه هي الحالة حتى عندما تكون قاعدة css الخاصة بـ stylesheet مهمة!

سؤال آخر (ربما سؤال غبي ولكن يجب أن يُسأل.): هو العنصر الذي تحاول العمل عليه ، هل هو display: block؛ أو عرض: مضمنة ؛ ؟

لا تعرف خبرتك في CSS .. لا تتصرف العناصر المضمنة دائمًا كما تتوقع.


إذا لم يكن الأمر كذلك ، #elem تتعامل مع عنصر واحد وهو #elem ، فيمكنك تغيير #elem إلى شيء آخر ووضعه حسب رغبتك ...

$('#elem').attr('id','cheaterId');

وفي CSS الخاص بك:

#cheaterId { width: 100px;}

آمل أن يساعد هذا ، سنان.


الحل الأكثر أمانا لهذا هو إضافة فئة ثم القيام السحر في CSS :-) ، addClass() و removeClass() يجب أن تقوم بهذا العمل.


انت تستطيع فعل ذالك:

$("#elem").css("cssText", "width: 100px !important;");

باستخدام "cssText" كاسم الخاصية وكل ما تريد إضافته إلى المغلق كقيمة لها.


بعد قراءة الإجابات والتجربة الأخرى ، هذا هو ما يناسبني:

$(".selector")[0].style.setProperty( 'style', 'value', 'important' );

هذا لا يعمل في IE 8 وتحت ، على الرغم من.


سبب المشكلة هو عدم فهم jQuery للسمة !important ، وبالتالي فشل في تطبيق القاعدة.

قد تكون قادرًا على حل هذه المشكلة ، وتطبيق القاعدة من خلال الرجوع إليها ، عبر addClass() :

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

أو باستخدام attr() :

$('#elem').attr('style', 'width: 100px !important');

النهج الأخير من شأنه أن يؤدي إلى عدم تعيين أي قواعد نمطية تم ضبطها مسبقًا. لذلك استخدم بعناية.

بالطبع ، هناك حجة جيدة بأن أسلوبNick Craver أسهل / أكثر حكمة.

تم تعديل نهج attr() أعلاه قليلاً للحفاظ على سلسلة / خصائص style الأصلي:

$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });

طريقة بديلة لإلحاق الاسلوب في الرأس

$('head').append('<style> #elm{width:150px !important} </style>');

يضيف هذا الأسلوب بعد كل ملفات css الخاصة بك بحيث يكون لها أولوية أعلى من ملفات css الأخرى وسيتم تطبيقها


قد يكون أو لا يكون مناسبًا لحالتك ولكن يمكنك استخدام محددات CSS للعديد من هذه المواقف.

إذا كنت ترغب مثلاً في المثالين السادس والسادس من .cssText أن يكون لديك عرض مختلف يمكنك كتابة:

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

أو:

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

كان لي نفس المشكلة في محاولة لتغيير لون النص من عنصر القائمة عند "الحدث". أفضل طريقة وجدت عندما كان لي نفس هذه المشكلة هي:

الخطوة الأولى: أنشئ في صفحتك الجديدة صفًا جديدًا لهذا الغرض ، على سبيل المثال:

.colorw{ color: white !important;}

الخطوة الأخيرة: تطبيق هذا الفصل باستخدام طريقة addClass على النحو التالي:

$('.menu-item>a').addClass('colorw');

تم حل المشكلة. آمل أن يساعد!


كندة في وقت متأخر ولكن هنا ما فعلته بعد مواجهة هذه المشكلة ...

var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style',origStyleContent+';width:150px !important');

لقد اكتشفت أيضًا أن بعض العناصر أو الإضافات (مثل Bootstrap) تحتوي على بعض الحالات الصفية الخاصة حيث لا تلعب بشكل جيد مع .addClass/.removeClass !important أو غيرها مثل .addClass/.removeClass ، وبالتالي يجب عليك .addClass/.removeClass على / إيقاف.

على سبيل المثال ، إذا كنت تستخدم شيئًا مثل <table class="table-hover"> فإن الطريقة الوحيدة لتعديل العناصر بنجاح مثل ألوان الصفوف هي تبديل / إيقاف تشغيل فئة table-hover في table-hover ، مثل هذا

$(your_element).closest("table").toggleClass("table-hover");

نأمل أن يكون هذا العمل مفيدًا لشخص ما! :)


لماذا لا تفعل فقط مثل هذا:

$("#elem").get(0).style.width= "100px!important";

ليس هناك حاجة للذهاب إلى تعقيد الإجابة على @ AramKocharyan ، ولا الحاجة إلى إدراج أي علامات نمط ديناميكيًا.

ما عليك سوى الكتابة فوق النمط ، ولكن ليس عليك تحليل أي شيء ، فلماذا؟

//accepts the hyphenated versions (i.e. not 'cssFloat')
function addStyle(element, property, value, important) {
    //remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    //insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

لا يمكن استخدام removeProperty() لأنه لن يزيل القواعد !important في Chrome.
لا يمكن استخدام element.style[property] = '' لأنه لا يقبل إلا camelCase في FireFox.

ربما يمكنك جعل هذا أقصر مع jQuery ، ولكن هذه الوظيفة الفانيلا سوف تعمل على المتصفحات الحديثة ، IE8 وغيرها


نحتاج أولاً إلى إزالة النمط السابق. أقوم بإزالة باستخدام العادية. أرسل لك مثالاً لتغيير اللون ، ...

var SetCssColorImportant = function (jDom, color) {
       var style = jDom.attr('style');
       style = style.replace(/color: .* !important;/g, '');
       jDom.css('cssText', 'color: ' + color + ' !important;' + style); }

يمكنك تحقيق ذلك بطريقتين:

$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");

يمكنك ضبط العرض مباشرة باستخدام .width() كما يلي:

$("#elem").width(100);

تم تحديثه للتعليق: لديك هذا الخيار أيضًا ، ولكنه سيحل محل كل عناصر css في العنصر ، لذا لست متأكدًا من أن هذا الخيار قابل للتطبيق:

$('#elem').css('cssText', 'width: 100px !important');

https://jsfiddle.net/xk6Ut/256/

النهج البديل هو إنشاء طبقة CSS وتحديثها ديناميكيًا في جافا سكريبت. للقيام بذلك ، يمكننا استخدام عنصر النمط ونحتاج إلى استخدام المعرف لعنصر النمط حتى نتمكن من تحديث فئة CSS

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

  var cssText = '.testDIV{ height:' + height + 'px !important; }';
  writeStyles('styles_js', cssText)

var elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');




css