CSS関連のサンプル

サンプル1

てすと。


太さ

形状

ソース1

function findstyle(){
  if(document.implementation.hasFeature("StyleSheets","2.0")){
    for(i=0;i<document.styleSheets.length;i++){
      alert(i+"番目のスタイルを関連づけるHTML要素名: "+document.styleSheets[i].ownerNode.nodeName);
    }
  }
}

//該当するクラスに適用されるCSSRuleを並べた配列を返す共通関数
function getCSSRules(className){
  result = new Array();
  count = 0;
  if(document.implementation.hasFeature("StyleSheets","2.0")){
    for(i=0;i<document.styleSheets.length;i++){
      rules = document.styleSheets[i].cssRules;
      for(j=0;j<rules.length;j++){
        if(rules[j].selectorText.indexOf("."+className) != -1){
          result[count] = rules[j];
          count++;
        }
      }
    }
  }
  return result;
}

function exploreclass(className){
  if(document.implementation.hasFeature("StyleSheets","2.0")){
    rules = getCSSRules(className);
    for(i=0;i<rules.length;i++){
      alert("セレクタ記述:"+rules[i].selectorText);
      for(j=0;j<rules[i].style.length;j++){
        pname = rules[i].style.item(j);
        alert("プロパティ名:"+pname+"\n値:"+rules[i].style.getPropertyValue(pname)+"\n優先度:"+rules[i].style.getPropertyPriority(pname));
      }
    }
  }
}

function setborderofclass(className){
  if(document.implementation.hasFeature("StyleSheets","2.0")){
    rules = getCSSRules(className);
    for(i=0;i<rules.length;i++){
      newvalue = "";
      newvalue += document.getElementById('set_borderwidth').value + " ";
      selectelm = document.getElementById('set_borderstyle');
      newvalue += selectelm.options[selectelm.selectedIndex].value+ " ";
      newvalue += document.getElementById('set_bordercolor').value;
      rules[i].style.setProperty('border',newvalue,"");
    }
  }
}

//CSS2Propertiesを使ってみました。ぶっちゃけこっちのが楽。
function setbgcolorofclass(className){
  if(document.implementation.hasFeature("StyleSheets","2.0")){
    rules = getCSSRules(className);
    for(i=0;i<rules.length;i++){
      rules[i].style.backgroundColor = document.getElementById('set_bgcolor').value;
    }
  }
}
.sample{border:3px solid #ffbbbb;}
<link rel="stylesheet" href="samples.css" type="text/css" />
<style type="text/css">
.test{font-weight:bold; background-color:#ffff99;}
</style>

(中略)

<p class="sample test">てすと。</p>

<p class="sample">
<input type="button" onclick="findstyle()" value="適用スタイルのリスト" />
<input type="button" onclick="exploreclass('test')" value="testクラスを調べる" />
<input type="button" onclick="exploreclass('sample')" value="sampleクラスを調べる" />
</p>

<p class="sample">
<input type="button" onclick="setborderofclass('sample')" value="sampleクラスの枠を設定する" /><br />
太さ
<input type="text" id="set_borderwidth" value="3px" /><br />
色
<input type="text" id="set_bordercolor" value="#ffbbbb" /><br />
形状
<select id="set_borderstyle">
<option value="none">なし</option>
<option value="hidden">隠す</option>
<option value="solid" selected="selected">実線</option>
<option value="double">二重線</option>
<option value="dotted">点線</option>
<option value="dashed">破線</option>
<option value="groove">谷線</option>
<option value="ridge">山線</option>
<option value="inset">内線</option>
<option value="outset">外線</option>
<option value="inherit">上位継承</option>
</select>
</p>

<p class="sample">
<input type="button" onclick="setbgcolorofclass('test')" value="testクラスの背景色を変える" />
<input type="text" id="set_bgcolor" value="#ffff99" />
</p>