web-dev-qa-db-ja.com

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％ 「実際には機能しません。

だから私の質問：CSSスタイルにはインラインにない値がありますが、これらの値を取得するにはどうすればよいですか？ IDを指定して、インライン値の代わりにスタイルを変更するにはどうすればよいですか？

javascripthtmlcssajaxdom
101
Coltin

わかりました。グローバルCSSを変更して、ペチクルスタイルのすべての要素を一度に効果的に変更したいようです。 Shawn Olsonのチュートリアル から、これを自分で行う方法を最近学びました。彼のコードを直接参照できます here 。

概要は次のとおりです。

document.styleSheetsで stylesheets を取得できます。これにより、実際にはページ内のすべてのスタイルシートの配列が返されますが、document.styleSheets[styleIndex].hrefプロパティを使用して、どのスタイルシートにいるかを確認できます。編集したいスタイルシートを見つけたら、ルールの配列を取得する必要があります。これは、IEでは「ルール」と呼ばれ、他のほとんどのブラウザーでは「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.

Yaでこれがどのように機能するかを教えてください。エラーが表示された場合はコメントしてください。

88
Mike

回答のコードを収集して、FF 25でうまく動作しているように見えるこの関数を書きました。

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  /* returns the value of the element style of the rule in the stylesheet
  *  If no value is given, reads the value
  *  If value is given, the value is changed and returned
  *  If '' (empty string) is given, erases the value.
  *  The browser will apply the default one
  *
  * string stylesheet: part of the .css name to be recognized, e.g. 'default'
  * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
  * string style: camelCase element style, e.g. 'fontSize'
  * string value optionnal : the new value
  */
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

これは、ブラウザで理解されていなくてもJSで使用されるcssに値を入れる方法です。例えばスクロールテーブルのtbodyのmaxHeight。

電話する：

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");

10
FrViPofm

他のソリューションがドキュメントのスタイルシートのリスト全体を通過する理由がわかりません。そうすると、各スタイルシートに新しいエントリが作成されますが、これは非効率的です。代わりに、新しいスタイルシートを追加し、目的のCSSルールを追加するだけです。

style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
    catch(err){}
}

そのプロパティのより具体的な「！important」スタイル宣言が既に存在しない限り、プロパティの値に「！important」を追加することで、要素に直接設定されたインラインスタイルでさえオーバーライドできることに注意してください。

4
user21820

コメントするのに十分な担当者がいないので回答をフォーマットしますが、それは問題の問題のデモンストレーションにすぎません。

要素スタイルがスタイルシートで定義されている場合、getElementById（ "someElement"）。styleからは見えないようです。

このコードは問題を示しています... jsFiddleの下からのコード 。

テスト2では、最初の呼び出しで、残りの項目の値は未定義であるため、単純なトグルである必要があるものが台無しになります。私の使用のために、重要なスタイル値をインラインで定義しますが、スタイルシートの目的を部分的に無効にしているようです。

これがページコードです...

<html>
  <head>
    <style type="text/css">
      #test2a{
        position: absolute;
        left: 0px;
        width: 50px;
        height: 50px;
        background-color: green;
        border: 4px solid black;
      }
      #test2b{
        position: absolute;
        left: 55px;
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin: 4px;
      }
    </style>
  </head>
  <body>

  <!-- test1 -->
    Swap left positions function with styles defined inline.
    <a href="javascript:test1();">Test 1</a><br>
    <div class="container">
      <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div>
      <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div>
    </div>
    <script type="text/javascript">
     function test1(){
       var a = document.getElementById("test1a");
       var b = document.getElementById("test1b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 1 -->

  <!-- test2 -->
    <div id="moveDownThePage" style="position: relative;top: 70px;">
    Identical function with styles defined in stylesheet.
    <a href="javascript:test2();">Test 2</a><br>
    <div class="container">
      <div id="test2a"></div>
      <div id="test2b"></div>
    </div>
    </div>
    <script type="text/javascript">
     function test2(){
       var a = document.getElementById("test2a");
       var b = document.getElementById("test2b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 2 -->

  </body>
</html>

これが問題の解明に役立つことを願っています。

スキップ

3
BentFX

任意の要素の「計算された」スタイルを取得できます。

IEは「currentStyle」と呼ばれるものを使用し、Firefox（および他の「標準に準拠した」ブラウザを想定）は「defaultView.getComputedStyle」を使用します。

これを行うには、クロスブラウザー関数を記述するか、プロトタイプやjQueryのような優れたJavascriptフレームワークを使用する必要があります（プロトタイプjavascriptファイルで「getStyle」を検索し、jquery javascriptファイルで「curCss」を検索します）。

ただし、高さまたは幅が必要な場合は、おそらくelement.offsetHeightとelement.offsetWidthを使用する必要があります。

返される値はNullですので、何らかのロジックを実行するために何かの幅を知る必要があるJavascriptがある場合（特定の値ではなく幅を1％増やします）

問題の要素にインラインスタイルを追加すると、「デフォルト」値として機能し、ページのロード時にJavascriptで読み取り可能になります。これは、要素のインラインスタイルプロパティであるためです。

<div style="width:50%">....</div>
2
user58777

おそらくこれを試してください：

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}
0
Shaq

この単純な32行の要点 を使用すると、特定のスタイルシートを識別し、そのスタイルを非常に簡単に変更できます。

var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");
0
solendil

これを実際に使用したことは一度もありませんが、おそらく DOMスタイルシート を検討する必要があります。しかし、私は正直それはやり過ぎだと思います。

単純に要素の幅と高さを取得する場合は、寸法の適用元に関係なく、element.offsetWidthとelement.offsetHeightを使用します。

0
Rakesh Pai