javascript动态设置样式style实例分析


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下:

动态修改style

1.易错:修改元素的样式不是设置class属性,而是className属性.
2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript中

操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为

javascript中-是不能做属性,类名的。所以在CSS中背景色是background-clolor,而javascript中则是style.background;元素样式名是class,在javascript中是className属性;font-size->style.fontSize;margin-top->style.marginTop

3.单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'" />

1.举例1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态修改style</title>
 <style type="text/css">
 .day
 {
 background-color:Green;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function dayclick() {
 var divMain = document.getElementById("divMain");
 //注意这里使用的是className而不是class
 divMain.className = "day";
 }
 function nightclick() {
 var divMain = document.getElementById("divMain");
 divMain.className = "night";
 }
 </script>
</head>
<body>
 <div id="divMain" class="day">
 <font color="red">中华人名共和国</font>
 </div>
 <input type="button" value="白天" onclick="dayclick()" />
 <input type="button" value="黑夜" onclick="nightclick()" />
</body>
</html>

2. 示例:动态修改style(模拟开灯,关灯)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
 .day
 {
 background-color:White;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function switchLight() {
 var btnSwitch = document.getElementById("btnSwitch");
 if (document.body.className == "day") {
 document.body.className = "night";
 btnSwitch.value = "开灯";
 }
 else {
 document.body.className = "day";
 btnSwitch.value = "关灯"; 
 }
 }
 </script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()"/>
</body>
</html>

3. 示例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态设置style练习(修改文本框背景色)</title>
 <script type="text/javascript">
 function IniEvents() {
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].type == "text") {
  //设置txtOnBlur函数为input元素的onblur事件的响应函数
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur是onblur的响应函数,而不是被响应函数调用
 的函数,所有可以用this来取的发生事件控件的对象
 */
 if (this.value.length <= 0) {
 this.style.background = "red";
 }
 else {
 this.style.background = "white";
 }
 }
 </script>
</head>
<body onload="IniEvents()">
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
javascript事件冒泡实例分析
May 13 #Javascript
javascript无刷新评论实现方法
May 13 #Javascript
javascript动态创建表格及添加数据实例详解
May 13 #Javascript
javascript动态创建链接的方法
May 13 #Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 #Javascript
javascript元素动态创建实现方法
May 13 #Javascript
javascript实现模拟时钟的方法
May 13 #Javascript
You might like
php中的登陆login
2007/01/18 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
js实现中文实时时钟
2020/01/15 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
django用户登录和注销的实现方法
2018/07/16 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
群胜软件Java笔试题
2012/09/29 面试题
《世界多美呀》教学反思
2014/03/02 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
大学生求职计划书
2014/04/30 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
初中学生操行评语
2014/12/26 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS