当前第2页 返回上一页
例如:
1 | div1.setAttribute("href","css2.css");
|
html代码:
1 2 3 4 5 | <link href= "css/css1.css" rel= "stylesheet" id= "cssLink" />
<div id= "divBtn1" onclick= "changeCss1()" >1</div>
<div id= "divBtn2" onclick= "changeCss2()" >2</div>
<div id= "divBtn3" onclick= "changeCss3()" >3</div>
<div id= "divBtn4" onclick= "changeCss4()" >4</div>
|
css1.css文件
1 2 3 4 5 6 7 8 9 10 11 | @charset "utf-8" ;
#divBtn 1 ,#divBtn 2 ,#divBtn 3 ,#divBtn 4 {
width : 100px ;
height : 100px ;
margin-bottom : 10px ;
}
#divBtn 1 { background :yellowgreen;}
#divBtn 2 { background :paleturquoise;}
#divBtn 3 { border : 1px solid #ccc }
#divBtn 4 { background : blue ;}
.div 3 { width : 100px ; height : 100px ; background :blueviolet}
|
css2.css文件
1 2 3 4 5 6 7 8 9 10 11 | @charset "utf-8" ;
#divBtn 4 { background : greenyellow;}
#divBtn 1 ,#divBtn 2 ,#divBtn 3 ,#divBtn 4 {
width : 200px ;
height : 200px ;
border : 1px solid #ccc ;
margin-bottom : 10px ;
}
#divBtn 1 { background :yellowgreen;}
#divBtn 2 { background :paleturquoise;}
.div 3 { width : 100px ; height : 100px ; background :blueviolet}
|
js代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script>
function changeCss1(){
var div1=document.getElementById( "divBtn1" );
div1.style.width= "100px" ;
div1.style.height= "100px" ;
div1.style.background= "red" ;
}
function changeCss2(){
var div2=document.getElementById( "divBtn2" );
div2.style.cssText= "width:100px;height:100px;background: palevioletred;" ;
}
function changeCss3(){
var div3=document.getElementById( "divBtn3" );
div3.setAttribute( "class" , "div3" );
}
function changeCss4(){
var obj=document.getElementById( "cssLink" );
obj.setAttribute( "href" , "css/css2.css" );
}
</script>
|
更多编程相关知识,请访问:编程视频!!
以上就是用js怎么改变css样式的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
javascript怎么改变input输入框的值
javascript清除数组的方法有哪些
javascript字符串和日期怎么互转
vue访问元素和组件的方法(附示例)
javascript常用数据类型的概念介绍
请描述javascript语言特性有哪些
鲜为人知的 json.stringify 用法
javascript怎么去除空格
javascript作用域的全面解析(附代码)
javascript中string乱码怎么办
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 用js怎么改变css样式