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 相关文章推荐
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
js中getter和setter用法实例分析
Aug 14 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
react+antd 递归实现树状目录操作
Nov 02 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
BBS(php & mysql)完整版(四)
2006/10/09 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
详解Python 中的容器 collections
2020/08/17 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
小学生考试获奖感言
2014/01/30 职场文书
2014村务公开实施方案
2014/02/25 职场文书
普通党员对照检查材料
2014/09/24 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL