js 批量设置css样式
在js中更换样式比较常见,但是批量设置比较少遇见;
但是在做就是插件时,不想额外的添加css文件(需要导入,还可能引起冲突),能批量设置就比较方便了。
以下代码是来自网上的三种方法,使用第二种最方便了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#div1{ width:100px; height:100px; background:#069;}
</style>
<script type="text/javascript">
//第一种使用JSON
function setStyle(obj,json){
for(var i in json)
{
obj.style[i]=json[i];
}
}
window.onload=function(){
var oDiv=document.getElementById('div1');
// setStyle(oDiv, {width: '200px', background: 'red'}); //第一种
// oDiv.style.cssText="width: 200px; height:300px; background:yellow;"; //第二种 使用cssText //使用第三种 with (不推荐使用)
with(oDiv.style)
{
width='300px';
height='500px';
background='yellow';
} };
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>
对于第三种为啥不使用width,是因为它有存在兼容性的问题。
详解请看http://blog.sina.com.cn/s/blog_9c581bd30101adnh.html
赋值:选用“带数值和单位”的写法,如:id.style.width = "100px";
取值:var w = parseInt(id.style.width)
js 批量设置css样式的更多相关文章
- 3.通过js代码设置css样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 5、通过js代码设置css样式
1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- JavaScript中批量设置Css样式
设置 input 元素的 属性: document.getElementsByTagName("INPUT")[0].setAttribute("属性",&q ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- JS设置CSS样式的几种方式
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- JS设置CSS样式的几种方式【转】
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)
问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...
- cssText设置css样式
js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js 如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...
- react学习(四)之设置 css样式 篇
react中设置css样式 方法一: 行内样式:使用{{ }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> ...
随机推荐
- Webstorm编译TypeScript
下载webstorm 下载node.js编译器npm Webstorm的安装很简单.但如果没有Java For Mac 环境打开Webstorm时会有提示,点击提示会跳转下载链接,下载安装就好. ...
- jvm系列(五):tomcat性能调优和性能监控(visualvm)
tomcat服务器优化 1.JDK内存优化 根据服务器物理内容情况配置相关参数优化tomcat性能.当应用程序需要的内存超出堆的最大值时虚拟机就会提示内存溢出,并且导致应用服务崩溃.因此一般建议堆的最 ...
- 匹夫细说C#:庖丁解牛聊委托,那些编译器藏的和U3D给的
0x00 前言 由于工作繁忙所以距离上一篇博客已经过去一个多月的时间了,因此决心这个周末无论如何也得写点东西出来,既是总结也是分享.那么本文主要的内容集中在了委托的使用以及内部结构(当然还有事件了,但 ...
- vertical-align浅析
一直以来都搞不懂vertical-align,它适用于什么元素,它的对齐规则是什么样的.索性查了下w3c相关规范,发现行高和基线对齐的规范说明里有如下内容: This section is being ...
- window下使用Redis Cluster部署Redis集群
日常的项目很多时候都需要用到缓存.redis算是一个比较好的选择.一般情况下做一个主从就可以满足一些比较小的项目需要.在一些并发量比较大的项目可能就需要用到集群了,redis在Windows下做集群可 ...
- .net 刷新页面防止表单二次提交
1.页面上按钮是服务器控件,现在刷新页面要防止按钮事件重复执行 原网址:http://blog.csdn.net/high_mount/article/details/51066056
- Delphi_06_Delphi_Object_Pascal_基本语法_04
这一节描述基本语法中的流程语句: 条件语句 IF语句. 选择语句 Case语句.循环语句 while/repeat/for.以及continue.break语句,还有终止程序 运行流程Exit.Ha ...
- Node节点
1.Node:节点元素节点->HTML标签文本节点->文字 但是在标准浏览器(除了IE6~8)中会把空格和换行都当做文本节点来处理注释节点->注释document2.节点的特征元素节 ...
- infopath发布的提示“无法解析SOAP消息”(The SOAP message cannot be parsed)问题解决方案
最近发现一个列表数据过大,每次发布infopath表单提示如下错误: 后来发现一个infopath表单通过list.asmx and Formsservice.asmx来进行发布的. This err ...
- 释放Android的函数式能量(I):Kotlin语言的Lambda表达式
原文标题:Unleash functional power on Android (I): Kotlin lambdas 原文链接:http://antonioleiva.com/operator-o ...