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读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
ES6函数实现排它两种写法解析
May 13 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
第三节--定义一个类
2006/11/16 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python变量和数据类型详解
2017/02/15 Python
详解Python正则表达式re模块
2019/03/19 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
python中wx模块的具体使用方法
2020/05/15 Python
python ETL工具 pyetl
2020/06/07 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
2014新年寄语
2014/01/20 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年车间工作总结
2014/11/21 职场文书