巧用cssText属性批量操作样式
给一个HTML元素设置css属性,如
1
2
3
4
|
var head= document.getElementById( "head" ); head.style.width = "200px" ; head.style.height = "70px" ; head.style.display = "block" ; |
这样写太罗嗦了,为了简单些写个工具函数,如
1
2
3
4
5
6
7
|
function setStyle(obj,css){ for ( var atr in css){ obj.style[atr] = css[atr]; } } var head= document.getElementById( "head" ); setStyle(head,{width: "200px" ,height: "70px" ,display: "block" }) |
发现 Google API 中使用了cssText属性,后在各浏览器中测试都通过了。一行代码即可,实在很妙。如
1
2
|
var head= document.getElementById( "head" ); head.style.cssText= "width:200px;height:70px;display:bolck" ; |
和innerHTML一样,cssText很快捷且所有浏览器都支持。此外当批量操作样式时,cssText只需一次reflow,提高了页面渲染性能。
但cssText也有个缺点,会覆盖之前的样式。如
1
|
< div style = "color:red;" >TEST</ div > |
想给该div在添加个css属性width
1
|
div.style.cssText = "width:200px;"; |
这时虽然width应用上了,但之前的color被覆盖丢失了。因此使用cssText时应该采用叠加的方式以保留原有的样式。
1
2
3
4
|
function setStyle(el, strCss){ var sty = el.style; sty.cssText = sty.cssText + strCss; } |
使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题,但由于 IE6/7/8中cssText返回值少了分号 会让你失望。
因此对IE6/7/8还需单独处理下,如果cssText返回值没";"则补上
1
2
3
4
5
6
7
8
9
10
11
12
|
function setStyle(el, strCss){ function endsWith(str, suffix) { var l = str.length - suffix.length; return l >= 0 && str.indexOf(suffix, l) == l; } var sty = el.style, cssText = sty.cssText; if (!endsWith(cssText, ';' )){ cssText += ';' ; } sty.cssText = cssText + strCss; } |
巧用cssText属性批量操作样式的更多相关文章
- 用cssText属性批量操作样式
给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...
- 巧用cssText属性
给一个HTML元素设置css属性,如 1 2 3 4 var head= document.getElementById("head"); head.style.width = & ...
- CSSText属性批量修改样式
给一个HTML元素设置css属性 var head= document.getElementById("head");head.style.width = "200p ...
- 小tip:巧用CSS3属性作为CSS hack——张鑫旭
一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...
- cssText设置css样式
js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js 如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...
- JQuery操作属性、样式、风格(attr、class、css)
样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...
随机推荐
- ffmpeg 按时间戳读取文件 -re
ffmpeg读取文件有两种方式:一种是直接读取,文件被迅速读完;一种是按时间戳读取.一般都是按时间戳读取文件, 命令行加入-re,表示按时间戳读取文件,在ffmpeg_opt.c 中可以看到re对应的 ...
- sourceInsight使用技巧,持续更新中~~~
作为测试人员,读各种平台的工程代码时,根本不想安装各种vs或者eclipse等,于是,就找了一款代码阅读工具. sourceInsight,下载地址为官网:http://www.sourceinsig ...
- Linux - 常用命令行(一)
今天和大家分享一些最基本常用命令行:也是作为新手最应该了解掌握的 ls 命令:用来显示指定工作目录下内容 dir命令:与ls命令一致 cd 命令:变化工作目录 pwd命令:显示用户当前的工作路径,显 ...
- 单件模式(Singleton Pattern)(转)
概述 Singleton模式要求一个类有且仅有一个实例,并且提供了一个全局的访问点.这就提出了一个问题:如何绕过常规的构造器,提供一种机制来保证一个类只有一个实例?客户程序在调用某一个类时,它是不会考 ...
- Linux 配置网络
1.vi /etc/sysconfig/network-scripts/ifcfg-eth0 2. # Advanced Micro Devices [AMD] 79c970 [PCnet32 LA ...
- Javacript中(function(){})() 与 (function(){}()) 区别 {转}
这个问题可以从不同的角度来看,但从结果上来说 :他们是一样的.首先,如果从AST(抽象语法树)的角度来看,两者的AST是一模一样的,最终结果都是一次函数调用.因此,就解析器产生的结果论而言,两者是没有 ...
- React Native 简介:用 JavaScript 搭建 iOS 应用(2)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- 动态修改 NodeJS 程序中的变量值
如果一个 NodeJS 进程正在运行,有办法修改程序中的变量值么?答案是:通过 V8 的 Debugger 接口可以!本文将详细介绍实现步骤. 启动一个 HTTP Server 用简单的 Hello ...
- vc++ 获取当前用户名
#include<afxwin.h> #include <stdio.h> int main(void) { char userName[MAX_PATH]; unsigned ...
- UPC 2224 Boring Counting (离线线段树,统计区间[l,r]之间大小在[A,B]中的数的个数)
题目链接:http://acm.upc.edu.cn/problem.php?id=2224 题意:给出n个数pi,和m个查询,每个查询给出l,r,a,b,让你求在区间l~r之间的pi的个数(A< ...