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获取变量
Aug 24 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
理解JavaScript中的对象
Aug 25 Javascript
vue+canvas实现拼图小游戏
Sep 18 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
example2.php
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php算法实例分享
2015/07/14 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
详解react-router如何实现按需加载
2017/06/15 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
详解JavaScript原型与原型链
2020/11/16 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python常用断言函数实例汇总
2020/11/30 Python
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
教师党员承诺书2015
2015/01/21 职场文书
新闻稿怎么写
2015/07/18 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
四十九个javascript小知识实用技巧
2021/11/20 Javascript
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS