JavaScript JavaScript:スタイルすたいる
2889 ワード
ブラウザがDOM 2レベルで定義されたcss機能をサポートしているかどうかを確認するには、次のコードを使用します.
var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0");
var supportsDOM2CSS2=document.implementation.hasFeature("CSS2","2.0");
alert(supportsDOM2CSS);
alert(supportsDOM2CSS2);
1、アクセス要素のスタイル
スタイルの設定:
スタイルオブジェクトを使用すると、スタイルプロパティで指定したスタイルを取得できます.
var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0");
var supportsDOM2CSS2=document.implementation.hasFeature("CSS2","2.0");
alert(supportsDOM2CSS);
alert(supportsDOM2CSS2);
1、アクセス要素のスタイル
スタイルの設定:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery.js"></script>
<style>
#divTest div{
border-color:#3C0;
border-style:solid;
width:50px;
height:20px;
padding:10px 20px 10px 20px;
border-radius:10px;
float:left;
margin-left:7px;
margin-top:2px;
}
</style>
<title> </title>
</head>
<body>
<div id="divTest">
<div>0</div> <div>1</div> <div>2</div> <div>3</div>
</div>
<script>
var div=document.getElementById("divTest");
div.style.backgroundColor="red";
div.style.color="white";
div.style.width="500px";
div.style.height="50px"
div.style.overflow="hidden"
div.style.border="1px solid black";
</script>
</body>
</html>スタイルオブジェクトを使用すると、スタイルプロパティで指定したスタイルを取得できます.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery.js"></script>
<style>
#divTest div{
border-color:#3C0;
border-style:solid;
width:50px;
height:20px;
padding:10px 20px 10px 20px;
border-radius:10px;
float:left;
margin-left:7px;
margin-top:2px;
}
</style>
<title> </title>
</head>
<body>
<div id="divTest" style=" color: white; width: 500px;height: 50px;overflow: hidden;border: 1px solid black;background-color: red;"> <div>0</div> <div>1</div> <div>2</div> <div>3</div>
</div>
<script>
var div=document.getElementById("divTest");
alert(div.style.backgroundColor);//"red";
alert(div.style.color);//"white";
alert(div.style.width);//"500px";
alert(div.style.height);//"50px"
alert(div.style.overflow);//"hidden"
alert(div.style.border);//"1px solid black";
</script>
</body>
</html>