JavaScript动态设置div的样式的方法


Posted in Javascript onDecember 26, 2015

有时候需要根据需要动态设置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程序设计有所帮助。

Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
javascript常用函数(1)
Nov 04 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
JS插件overlib用法实例详解
Dec 26 #Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 #Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 #Javascript
详解Document.Cookie
Dec 25 #Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 #Javascript
JQuery datepicker 用法详解
Dec 25 #Javascript
一道JS前端闭包面试题解析
Dec 25 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
js实现中文实时时钟
2020/01/15 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
浅析使用Python操作文件
2017/07/31 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python编程使用协程并发的优缺点
2018/09/20 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
C#如何进行LDAP用户校验
2012/11/21 面试题
Servlet方面面试题
2016/09/28 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
社保委托书怎么写
2014/08/02 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
工作报告范文
2019/06/20 职场文书