[解決済み] JavascriptでCSSの値を変更する

質問

javascriptでインラインのCSS値を設定するのは簡単です。幅を変更したい場合、以下のようなhtmlがあります。

<div style="width: 10px"></div>

必要なのは

document.getElementById('id').style.width = value;

インラインスタイルシートの値が変更されます。通常、インライン・スタイルがスタイルシートを上書きするので、これは問題ではありません。例を挙げます。

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

このJavascriptを使って

document.getElementById('tId').style.width = "30%";

というのが出てきます。

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

これは問題です、私はインライン値を変更したくないだけでなく、私が持っているときに、私はそれを設定する前に、幅を探します場合。

<div id="tId"></div>

返される値は Null です。したがって、何かのロジックを実行するために幅を知る必要がある Javascript がある場合 (特定の値ではなく、幅を 1% 増やす)、文字列 "50%" を期待したときに Null を返しても、実際には機能しません。

そこで質問です。CSS スタイルにインラインに配置されていない値がありますが、これらの値を取得するにはどうしたらよいでしょうか? どのように私はidを与えられた、インライン値の代わりにスタイルを変更することができますか？

どのように解決するには？

OK、それはあなたがグローバルCSSを変更したいように聞こえるので、効率的に一度にペティキュラスタイルのすべての要素を変更することができます。 私は最近、これを自分で行う方法を Shawn Olson のチュートリアル . 彼のコードを直接参照することができます ここで .

以下は要約です。

を取得することができます。 スタイルシート を経由して document.styleSheets . これは実際にはページ内のすべてのスタイルシートの配列を返しますが、どのスタイルシートの上にいるのかは document.styleSheets[styleIndex].href プロパティを使うことで判別できます。 編集したいスタイルシートが見つかったら、ルールの配列を取得する必要があります。 これは、IEでは"rules"、他のほとんどのブラウザでは"cssRules"と呼ばれています。 どのような CSSRule にあることを知るには selectorText プロパティにあります。 作業コードは以下のような感じです。

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

これがどのように機能するか教えてください。また、何かエラーがあればコメントしてください。