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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
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初学者头疼问题总结
2006/10/09 PHP
php下的权限算法的实现
2007/04/28 PHP
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
Vue+Django项目部署详解
2019/05/30 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python 模拟登录B站的示例代码
2020/12/15 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
大学生自我评价200字(4篇)
2014/09/17 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书