星空网 > 软件开发 > Java

javascript如何动态设置div的样式

javascript如何动态设置div的样式:
有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><head><title>动态设置div的样式-蚂蚁部落</title><style type="text/css">div{ width:50px; height:50px; background:red; margin-top:10px;}.bg{ background-color:blue;}</style><script type="text/javascript">window.onload=function(){ var firstDiv=document.getElementById("firstDiv"); var secondDiv=document.getElementById("secondDiv"); var first=document.getElementById("first"); var second=document.getElementById("second");   first.onclick=function(){   firstDiv.style.backgroundColor="green"; } second.onclick=function(){   secondDiv.className="bg"; }}</script></head><body><div id="firstDiv"></div><div id="secondDiv"></div><input type="button" value="使用style方式" id="first" /><input type="button" value="使用className方式" id="second" /></body></html>

以上代码实现了我们的要求,不过是用了两种方法,一种是style方式,一种是className方式。
特别注意:
1.使用style时,像background-color这种符合单词属性要使用驼峰写法(第二个单词首字母大写),写成backgroundColo这种形式。
2.使用className时,属性值是class样式名称,但是前面不能加点(.)。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8322

更多内容可以参阅:http://www.softwhy.com/javascript/




原标题:javascript如何动态设置div的样式

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

好消息!eBay Fulfillment澳洲仓新增大件配送服务啦!:https://www.goluckyvip.com/news/7677.html
一个合格的Shopee运营每天都要干些啥?:https://www.goluckyvip.com/news/7678.html
Shopee波兰站点推出超级卖家计划!:https://www.goluckyvip.com/news/7679.html
快递UPS和DHL的优势分别是什么?亚马逊卖家如何选UPS和DHL?:https://www.goluckyvip.com/news/768.html
进口橄榄油到港口后清关有哪些注意事项?:https://www.goluckyvip.com/news/7680.html
做东南亚跨境电商怎么样,要考虑哪些因素?:https://www.goluckyvip.com/news/7681.html
深圳博物馆五一开放时间2024:https://www.vstour.cn/a/407239.html
青岛崂山北九水景区开放吗 青岛崂山北九水景区开放了吗:https://www.vstour.cn/a/407240.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流