javascript - with - weschool html




تغيير مجموعة CSS من Javascript (5)

هل من الممكن إجراء تغييرات على مجموعة قواعد CSS ديناميكيًا (أي بعض JS التي من شأنها تغيير مجموعة CSS عند نقر المستخدم على عنصر واجهة مستخدم)

يتم تطبيق مجموعة قواعد CSS هذه على الكثير من العناصر (عبر محدد الصف) على الصفحة وأريد تعديلها عندما ينقر المستخدم على الأداة ، بحيث تتغير جميع العناصر التي تحتوي على الفصل.


اعتمادًا على ما تحاول تحقيقه ، قد يكون الحل الأفضل هو تغيير / إضافة فئة إلى عنصر محتوي (ستفعل الهيئة!) ، وتحديد الطبقات وفقًا لذلك.

.yourclass { color: black }
#wrapper.foo .yourclass { color: red }
#wrapper.bar .yourclass { color: blue }

ثم يمكنك فقط استخدام

document.getElementById('wrapper').className='foo';

(أو اختصار إطار عمل js المختار لنفسه) لتغيير كل شيء مع class your class داخل أي عنصر wrapper .


على الرغم من أن setAttribute رائع ، إلا أن هناك طريقة قياسية لإجراء ذلك عبر معظم المتصفحات:

htmlElement.className = 'someClass';

لفعل ذلك على العديد من العناصر ، ستحتاج إلى حل متصفح مشترك:

function getElementsByClassName( className, context, tagName ) {
  context = context || document;
  if ( typeof context.getElementsByClassName === 'function' )
    return context.getElementsByClassName( className );

  if ( typeof context.getElementsByTagName !== 'function' )
    return [];

  var elements = typeof tagName === 'string' ? context.getElementsByTagName( tagName ) :
    context.getElementsByTagName('*'),
  ret = [];
  for ( var i = 0, il = elements.length; i < il; i++ )
    if ( elements[ i ].className.match( className ) )
      ret.push( elements[ i ] );

  return ret;
}

var elements = getElementsByClassName('someClass');

for ( var i = 0, il = elements.length; i < il; i++ )
  elements[ i ].className = 'newClass';

قد ترغب في استبدال الخط:

if ( elements[ i ].className.match( className ) )

مع بعض التعبير العادي ، ولكن سيكون عليك الهروب من الشخصيات الخاصة في هذه الحالة.


لقد حاولت استخدام الشفرة عبر رابط من تعليق alex-gyoshev @ ، ولكنها لا تعمل

  1. يفشل في قواعد CSS باستخدام خطوط Google في Chrome
  2. فشلت في فحوصات أمان FireFox

لذلك قمت بتغييره قليلاً ، ولكن حذف وظيفة delete لأنه لم يكن هناك حاجة لي. تم التحقق في IE 11 و FireFox 32 و Chrome 37 و Opera 26.

function getCSSRule(ruleName) { // Return requested style object
  ruleName = ruleName.toLowerCase(); // Convert test string to lower case.
  var styleSheet;
  var i, ii;
  var cssRule = false; // Initialize cssRule. 
  var cssRules;
  if (document.styleSheets) { // If browser can play with stylesheets
    for (i = 0; i < document.styleSheets.length; i++) { // For each stylesheet
      styleSheet = document.styleSheets[i];
      if (!styleSheet.href) {
        if (styleSheet.cssRules) { // Browser uses cssRules?
          cssRules = styleSheet.cssRules; // Yes --Mozilla Style
        } else { // Browser usses rules?
          cssRules = styleSheet.rules; // Yes IE style. 
        } // End IE check.
        if (cssRules) {
          for (ii = 0; ii < cssRules.length; ii++) {
            cssRule = cssRules[ii];
            if (cssRule) { // If we found a rule...
              // console.log(cssRule);
              if (cssRule.selectorText) {
                console.log(cssRule.selectorText);
                if (cssRule.selectorText.toLowerCase() == ruleName) { //  match ruleName?
                  return cssRule; // return the style object.
                }
              }
            }
          }
        }
      }
    }
  }
  return false; // we found NOTHING!
}

من المحزن أن واجهات برمجة التطبيقات لتحرير أوراق الأنماط باستخدام JS ليست متناسقة عبر المتصفحات. تحاول الأداة YUI Stylesheet Utility التغلب على هذه الاختلافات حتى تتمكن من استخدام ذلك. يمكنك أيضًا الاطلاع على شفرة المصدر لمعرفة كيفية عملها إذا كنت لا تريد استخدام YUI نفسه.


يمكنك ذلك ، لكنه مرهق إلى حد ما. أفضل مرجع حول كيفية القيام بذلك هو المقالة التالية: تماما Pwn CSS مع Javascript ( رابط أرشيف الويب ).

تمكنت من الحصول عليها للعمل مع فايرفوكس و IE - لم أستطع في Chrome ، رغم أنه يبدو أنه يدعم أساليب DOM. تقارير ricosrealm أنه يعمل في كروم ، أيضا.





css