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是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
vue中锚点的三种方法
Jul 06 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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 和 XML: 使用expat函数(二)
2006/10/09 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
layui文件上传实现代码
2017/05/20 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vuex的使用步骤
2021/01/06 Vue.js
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
查询优化的一般准则有哪些
2015/03/08 面试题
抽象类和接口的区别
2012/09/19 面试题
成教自我鉴定
2013/10/27 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
污水处理保证书
2015/05/09 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP