javascript中使用css需要注意的地方小结


Posted in Javascript onSeptember 01, 2010

1.在改变单个元素样式时,注意style对象的语法和css中使用的语法几乎是一一对应的。不过包含连字符的属性则被替换为一种“camel castring”的形式,例如:font-size现在成了fontSize,而margin-top变成了marginTop;
2.在使用“float”时,因为“float”是javascript的一个保留字,所以就不能使用style.float,而改成了style.cssFloat(IE使用的是style.styleFloat);
3. 获得元素的计算样式:
在W3C DOM下可以:

var heading = document.getElementById("heading"); 
var computedStyle = document.defaultView.getComputedStyle(heading,null); 
var computedFontFamily = computedStyle.fontFamily;//sans-serif

IE不支持使用DOM标准方法,可以:
var heading = document.getElementById("heading"); 
var computedFontFamily = heading.currentStyle.fontFamily;//sans-serif

综合上述这些方法,可以创建一个跨浏览器函数来实现
function retrieveComputedStyle(element,styleProperty){ 
var computedStyle = null; 
if(typeof element.currentStyle != "undefined"){ 
computedStyle = element.currentStyle; 
}else{ 
computedStyle = document.defaultView.getComputedStyle(element,null); 
} 
return computedStyle[styleProperty]; 
}

对照表

CSS Properties To JavaScript Reference Conversion

CSS Property JavaScript Reference
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

Usage

Internet Explorer

document.all.div_id.style.JS_property_reference = "new_CSS_property_value";

Older Netscape's (4.7 and earlier)

document.div_id.JS_property_reference = "new_CSS_property_value";

Netscape 6.0+ and Opera (and other Mozilla)

document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";

Note the use of parentheses instead of square brackets in newer Mozilla's "getElementById()" reference.

Javascript 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
基于datagrid框架的查询
Apr 08 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
JavaScript中reduce()的用法
May 11 Javascript
js截取函数(indexOf,join等)
Sep 01 #Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 #Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 #Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 #Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 #Javascript
js 中 document.createEvent的用法
Aug 29 #Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 #Javascript
You might like
PHP查询网站的PR值
2013/10/30 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
vue debug 二种方法
2018/09/16 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python 函数基础知识汇总
2018/03/09 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
总经理岗位职责
2013/11/09 职场文书
门前三包责任书
2014/04/15 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
六一儿童节开幕词
2015/01/29 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python