本文摘自PHP中文网,作者little bottle,侵删。
本篇文章中主要讲述的是JS修改网页元素样式的代码示例,具有一定参考价值,感兴趣的朋友可以了解一下,也希望你看后有所帮助。在前端开发中,有时候需要动态修改的网页元素的样式,这里将使用JS动态修改元素样式的方法做个小结。
网页结构:
按钮:
标签:input 类型:button id:btn value:点我
p:
标签:p id:box
使用JS修改网页元素样式有两种方式:
1.使用ClassName
2.使用Style对象
代码如下:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >DOM操作元素的样式</ title >
< style type = "text/css" >
.box{
width: 100px;
height: 100px;
background-color: red;
}
</ style >
</ head >
< body >
< input type = "button" id = "btn" value = "点 我" />
< div id = "box" ></ div >
< script type = "text/javascript" >
//定义函数my$-根据元素id获得页面元素,目的是为了提高效率
function my$(id){
return document.getElementById(id);
}
// 方法1.根据ClassName修改元素的样式
// var btn=my$('btn');
// btn.onclick=function(){
// my$('box').className='box';
// }
//方法2.根据Style对象修改元素的样式
var btn=my$('btn');
btn.onclick=function(){
var box=my$('box');
box.style.width="100px";
box.style.height="100px";
box.style.backgroundColor="red";
}
</ script >
</ body >
</ html >
|
相关教程:HTML视频教程
阅读剩余部分
相关阅读 >>
html body标签怎么用
html 框架如何使用
html怎么去除文本下划线
html中块级元素是什么
html基础知识
html table标签怎么用
html隐藏控件方法
html怎么设置段距
一篇文章让你看懂html基本规则和网页结构
什么是语义化的html
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js开发之动态修改网页元素样式