这篇文章主要介绍了 JavaScript 动态设置 div 的样式的方法的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
有时候需要根据需要动态设置 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 样式名称,但是前面不能加点 (.)。
PS:JavaScript 动态改变 div 属性的实现方法
本文实例讲述了 JavaScript 动态改变 div 属性的实现方法。分享给大家供大家参考。具体如下:
这里可以通过 JS 动态改变 div 属性,样式等
- <script type="text/javascript">
- var oBox = document.getElementById('box');
- var oDiv = document.getElementById('div1');
- var aInput = document.getElementsByTagName('input');
- var aAttr = ['width', 'height', 'backgroundColor', 'display', 'display'];
- var aValue = ['200px', '200px', 'red', 'none', 'block'];
- for (var len = aInput.length,
- i = 0; i < len; i++) {
- aInput[i].index = i; //索引
- aInput[i].onclick = function() {
- //重置按钮,cssText清空DIV属性
- if (this.index == aInput.length - 1) oDiv.style.cssText = "";
- //设置DIV属性
- property(oDiv, aAttr[this.index], aValue[this.index]);
- };
- }
- //控制DIV属性
- function property(obj, attr, value) {
- obj.style[attr] = value;
- }
- </script>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0228/267888.html