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

代码实例如下:

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
<!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属性，样式等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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程序设计有所帮助。

JavaScript动态设置div的样式的方法的更多相关文章

  1. 关于设置SQLPLUS提示符样式的方法----登陆配置文件，动态加载提示符

    工作中用到 sqlplus mdsoss/mdsoss, 所以来了解一下sqlplus (C shell .cshrc文件里中alisa) 关于设置SQLPLUS提示符样式的方法 12638阅读 1评 ...

  2. JavaScript动态实现div窗口弹出&消失功能

    先积累一个JavaScript动态实现div窗口弹出&消失功能 首先是index.jsp代码 <html> <head> <link rel="styl ...

  3. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  4. JavaScript 动态添加div 绑定点击事件

    1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...

  5. 设置TabWidget的样式的方法、关联Fragment与tabwidget的方法、点击tab显示相应Fragment方法

    private void updateTabHost(TabHost tabHost) { int count = tabHost.getTabWidget().getChildCount(); ; ...

  6. 【前端_js】jQuery动态设置元素的样式

    1.用css()方法查询元素的某个样式 $("div").css("padding-left")); 2.用css()方法设置元素的样式 法一: $(" ...

  7. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. javascript如何设置DIV背景色为随机色

    随机色有两种格式: 效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html 1.rgb(xxx,xxx,xxx) 2.#xxxxx ...

  9. iOS-UITextField中给placeholder动态设置颜色的四种方法

    思路分析: 0.自定义UITextField 1.设置占位文字的颜色找-->placeholderColor,结果发现UITextField没有提供这个属性 2.在storyboard/xib中 ...

随机推荐

  1. Python - Asyncio模块实现的生产消费者模型

    [原创]转载请注明作者Johnthegreat和本文链接 在设计模式中,生产消费者模型占有非常重要的地位,这个模型在现实世界中也有很多有意思的对应场景,比如做包子的人和吃包子的人,当两者速度不匹配时, ...

  2. DS线段树优化最短路&&01bfs浅谈

    1简介 为什么需要?原因很简单,当需要有大量的边去连时,用线段树优化可以直接用点连向区间,或从区间连向点,或从区间连向区间,如果普通连边,复杂度是不可比拟的.下面简单讲解一下线段树(ST)优化建图. ...

  3. 干货！！！测试如何确定是前端bug还是后端bug

    目前的项目大多数都是前后端分离的,当我们发现bug后不知道指派给哪位开发,指派错了不仅影响解决bug 的效率,还容易被开发怼.最主要的是人家会认为你不专业,不专,不专呀.废话少说,上干货(踩过的坑)! ...

  4. 腾讯云容器服务 TKE 拿下新加坡 MTCS 最高级别安全认证

    近日,腾讯云容器服务 TKE 荣获新加坡 MTCS 最高级安全认证,标志着腾讯云 TKE 在为用户提供可靠.易部署.灵活扩展等基础服务上,已经全面满足了新加坡监管机构以及多个行业客户对服务安全的要求. ...

  5. 计算机二级Python学习笔记（一）：温度转换

    今天通过一个温度转换的十行代码,理解了一些Python的基本元素. 所谓温度转换,就是摄氏度和华氏度的转换,要求输入摄氏度,可以输出华氏度,反之一样能实现.代码如下: #TempConvert.py ...

  6. kubernetes生产实践之mysql

    简介 kubedb mysql 生命周期及特性 Supported MySQL Features Features Availability Clustering ✓ Persistent Volum ...

  7. 【odoo14】第八章、服务侧开发-进阶

    本章代码位于作为GITHUB库 https://github.com/PacktPublishing/Odoo-14-Development-Cookbook-Fourth-Edition 在第五章( ...

  8. AmazonS3 使用AWS SDK for Java实现跨源资源共享 (CORS)

    CORS 配置 创建 CORS 配置并对存储桶设置该配置 通过添加规则来检索并修改配置 向存储桶添加修改过的配置 删除配置 import com.amazonaws.AmazonServiceExce ...

  9. BIMFACE二次开发SDK 开源C#版

    [ BIMFace.SDK.CSharp ] 是基于微软.NET 技术封装的用于 BIMFACE 二次开发的通用类库.其中封装了BIMFace服务端API,包含基础API.文件上传API.文件转换AP ...

  10. 攻防世界 reverse Windows_Reverse1

    Windows_Reverse1  2019_DDCTF 查壳 脱壳 脱壳后运行闪退,(或许需要修复下IAT??),先IDA 静态分析一下 int __cdecl main(int argc, con ...