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 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
javascript 数组操作详解
Jan 29 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
原生JS封装vue Tab切换效果
Apr 28 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实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
基于Python的关键字监控及告警
2017/07/06 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python实现京东抢秒杀功能
2021/01/25 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
公司JAVA开发面试题
2015/04/02 面试题
什么是测试驱动开发(TDD)
2012/02/15 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
疾病证明书
2015/06/19 职场文书
汽车销售员工作总结
2015/08/12 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
Android存储中最基本的文件存储方式
2022/04/30 Java/Android