<!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>
JS四种写CSS的方法
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性，如何动态修改css样式呢？...
- 第一种：通过判断浏览器的userAgent，用正则来判断是否是ios和Android客户端。 代码如下： 第二种：...
- 检测数据类型的四种方法 函数的基础知识 函数由两部分构成函数定义阶段函数调用阶段函数只定义，不调用，什么都不会发生...
- 在学习前端的时候，我们应该知道css给html标记添加各种样式，用来告诉浏览器，因该如何显示这些标记里面的内容。既...
- 在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这...
