0

次のコードを使用して、スタイルシートのクラス定義を変更しています。

/*
 * At this point it is: 
 * "position: absolute; height: 20px; background-image: none; background-position: initial initial; background-repeat: initial initial;"
 * But I actually set "background: none;" in my css file
 */
var cssText = document.styleSheets[ 0 ][ "cssRules" ][ 3 ].style.cssText;

//Just replace the height
document.styleSheets[ 0 ][ "cssRules" ][ 3 ].style.cssText = cssText.replace( "height: 20px", "height: 14px" );

/*
 * Now when I print it out, it's:
 * "position: absolute; height: 20px;"
 */
console.log( document.styleSheets[ 0 ][ "cssRules" ][ 3 ].style.cssText );

「background: none;」を再度追加すると、次に、「background-image: none; background-position: initial initial; background-repeat: initial initial;」に戻します。もの。(奇妙なことに、「background-image: none; background-position: initial initial; background-repeat: initial initial;」を追加すると、背景情報なしで表示されます!)

なぜこれが起こるのか分かりますか?

編集:スタイルに直接アクセスする代わりに cssText を使用している理由は、多くのスタイルで設定する必要があり"!important"、cssText 以外にこれを行う方法がないためです。

4

0 に答える 0