<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White;
border:1px solid white; padding:10px 25px; font-size:18px;}
.style1:hover{ background-color:#66B3FF; cursor:pointer;}
.style2{margin:10px auto ;background-color:gray; display:block;color:black;
border:1px solid white; padding:10px 25px; font-size:18px;}
.style2:hover{ background-color:black; color:White; cursor:pointer}
</style>
<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
</head>
<body>
<div>
<input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
<div id="tool">
<input type="button" value="【obj.style.className】更改样式" οnclick="changeStyle1()"/>
<input type="button" value="【obj.style.cssText】更改样式" οnclick="changeStyle2()"/>
<input type="button" value="【obj.className】更改样式" οnclick="changeStyle3()" />
<input type="button" value="更改外联css样式" οnclick="changeStyle4()" />
</div>
</div>
<script>
//方法一： 使用obj.style.className来修改样式表的类名
function changeStyle1() {
var obj = document.getElementById("btnB");
obj.style.backgroundColor= "black";
}
// 方法二：使用obj.style.cssText来修改嵌入式的css
function changeStyle2() {
var obj = document.getElementById("btnB");
obj.style.cssText = "color:red; font-size:13px;";
}
//方法三： 使用obj.className来修改样式表的类名
function changeStyle3() {
var obj = document.getElementById("btnB");
//obj.className = "style2";
obj.setAttribute("class", "style2");
}
// 方法四：使用更改外联的css文件，从而改变元素的css
function changeStyle4() {
var obj = document.getElementById("css");
obj.setAttribute("href","css2.css");
}
</script>
</body>
</html>
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
