目录方法一:使用style属性来设置方法二:定义好类选择器的样式方法一:使用style属性来设置 使用style属性来设置 html代码: <div id="div1"
使用style属性来设置
html代码:
<div id="div1">
div
</div>
Javascript代码:
var div1 = document.getElementById("div1");
div1.onclick = function () {
//修改样式
div1.style.border = "1px solid red";
div1.style.width = "200 px";
div1.style.fontSize = "200px";
}
定义好类选择器的样式,通过元素的ClassName
属性来设置其Class属性值,用的比较多
html代码:
<div id="div2">
div2
</div>
Css代码:
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
javascript代码:
var div2 = document.getElementById("div2");
div2.onclick = function () {
div2.className = "d1";
}
到此这篇关于javascript 动态样式控制方法的文章就介绍到这了,更多相关Javascript 动态样内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Javascript 动态样式控制方法
本文链接: https://www.lsjlt.com/news/141472.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0