JAvascriptアクセスCSSスタイルシートの変更
3487 ワード
JAvascriptは、変更スタイルシートにアクセスし、ページを簡単に動的に変更できます.
準備セクション
イベント駆動メカニズムの異なるブラウザ互換性の理解方法
1.アクセス要素のstyle属性のCSSスタイル
これはstyleオブジェクトを直接使用して簡単にアクセスできます.たとえば、次のようにします.
CSSにアクセスする方法は次のとおりです.
//獲得要素
varoDiv=document.getElementById("mdiv");
//要素のstyleオブジェクトにアクセスし、オブジェクトの属性にアクセスしたり、属性の値を変更したりして、直接彼に値を割り当てることができます.
alert(oDiv.style.backgroundColor);
具体的なコードは次のとおりです.
2、外部定義のCSSスタイル(クラス定義のCSSスタイル)にアクセスする
cssファイルは次のとおりです.
.style1{ width:600px; height:400px; background-color:black; }
準備セクション
イベント駆動メカニズムの異なるブラウザ互換性の理解方法
<scriptlanguage="javascript">
<!--
if(window.XMLHttpRequest){//Mozilla,Safari,IE7,IE8
if(!window.ActiveXObject){//Mozilla,Safari
alert("Mozilla,Safari");
}else{
alert("IE");
}
}else{
alert("IE6");
}
//-->
</script>1.アクセス要素のstyle属性のCSSスタイル
これはstyleオブジェクトを直接使用して簡単にアクセスできます.たとえば、次のようにします.
...
CSSにアクセスする方法は次のとおりです.
//獲得要素
varoDiv=document.getElementById("mdiv");
//要素のstyleオブジェクトにアクセスし、オブジェクトの属性にアクセスしたり、属性の値を変更したりして、直接彼に値を割り当てることができます.
alert(oDiv.style.backgroundColor);
具体的なコードは次のとおりです.
<html>
<head>
<title>js </title>
<script language="javascript" src="myfun.js"></script>
<script language="javascript" type="text/javascript">
function test1(){
window.alert(new Date().toLocaleString());
}
function test2(e){
//alert(e.value);
var div1=document.getElementById('div1');
if(e.value==" "){
// div1
div1.style.backgroundColor="black";
}else if(e.value==" "){
// div1.style.background-color="red";//
div1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<input type="button" onclick="test1()" value=" "/>
<!-- style style-->
<div id="div1" style="width:400px;height:300px;background-color:red">div1</div>
<input type="button" value=" " onclick="test2(this)" />
<input type="button" value=" " onclick="test2(this)" />
</body>
</html>2、外部定義のCSSスタイル(クラス定義のCSSスタイル)にアクセスする
<span style="font-size:10px;"><html>
<head>
<title>js </title>
<script language="javascript" src="myfun.js"></script>
<link href="my.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
function test1(e){
// my.css class
var ocssRules=document.styleSheets[0].rules;//IE
//var ocssRules=document.styleSheets[0].cssRules;FF
var ocss=document.styleSheets[0].rules;// 360 ie
// coss class
//coss[0] 0 my.css
var style1=ocss[0];
if(e.value==" "){
style1.style.backgroundColor="black";
}else if(e.value==" "){
style1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<!-- style style-->
<div id="div1" class="style1" >div1</div>
<input type="button" value=" " onclick="test1(this)" />
<input type="button" value=" " onclick="test1(this)" />
</body>
</html></span>cssファイルは次のとおりです.
.style1{ width:600px; height:400px; background-color:black; }