陈奕迅和李克勤:js修改css详解

来源：百度文库 编辑：九乡新闻网 时间：2024/04/28 13:42:33
abc.css
 CSS code
 .class1
    {
    width:10px;
    background-color:red;
    }
 HTML code
  



  New Document


 
aaa



 (2)
  


NewDocument
 
 
 
 
aaa

  

  还可以用 document.styleSheets(i).href 可以知道当前页面中引用的每个css的文件！
 另：CSS属性与JavaScript编码对照表
 （一定要注意，上次本人_何向阳，在使用js修改css的中margin-left属性时，总报"left"未定义，后来，找了好多资料，才发现在js中，margin-left的写法为:marginLeft，恍然大悟，希望遇到相同问题的朋友，谨慎对待。）
 CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。
    比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？
  
    function imageOver(e) {  
       e.style.border="1px solid red";  
    }  
    function imageOut(e) {  
        e.style.borderWidth=0;  
    }  

  
     JavaScript CSS Style属性对照表
     盒子标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
borderborder
border-bottom 　　borderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-width 　　borderBottomWidth
border-colorborderColor
border-left 　　borderLeft
border-left-colorborderLeftColor
border-left-style 　　borderLeftStyle
border-left-widthborderLeftWidth
border-right 　　borderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-width 　　borderRightWidth
border-styleborderStyle
border-top 　　borderTop
border-top-colorborderTopColor
border-top-style 　　borderTopStyle
border-top-widthborderTopWidth
border-width 　　borderWidth
clear 　　clear
floatfloatStyle
margin 　　margin
margin-bottom 　　marginBottom
margin-leftmarginLeft
margin-right 　　marginRight
margin-top 　　marginTop
paddingpadding
padding-bottom 　　paddingBottom
padding-leftpaddingLeft
padding-right 　　paddingRight
padding-top　　 paddingTop
      颜色和背景标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法(区分大小写)
background 　　background
background-attachmentbackgroundAttachment
background-color　　 backgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeat 　　backgroundRepeat
colorcolor
    样式标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
displaydisplay
list-style-type　　 listStyleType
list-style-imagelistStyleImage
list-style-position　　 listStylePosition
list-stylelistStyle
white-space　　 whiteSpace
    文字样式标签和属性对照
CSS语法 (不区分大小写)JavaScript语法 (区分大小写)
font　　 font
font-family　　 fontFamily
font-sizefontSize
font-style　　 fontStyle
font-variant　　 fontVariant
font-weightfontWeight
    文本标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法(区分大小写)
letter-spacing　　 letterSpacing
line-breaklineBreak
line-height　　 lineHeight
text-aligntextAlign
text-decoration 　　textDecoration
text-indenttextIndent
text-justify　　 textJustify
text-transformtextTransform
vertical-align　　 verticalAlign
  obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style="..."），看一下代码
  XML/HTML代码
 
 
 
 
JS获取CSS属性值 
 
 
  
JS获取CSS属性值
 
 
    alert(document.getElementById("css88").style.width);//200px  
    alert(document.getElementById("css88").style.color);//空白  
     
 
 
 上面这个例子对id为"css88"的div设置了2种烦事的样式，包括style和外部样式class。
 从alert出来的信息可以看到，document.getElementById("css88").style方法获取不到class为ss的属性和值。
 那么这么样才能获取到class为ss的属性和值呢？
 IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。
 网上一个比较方法是：
  XML/HTML代码
 
 
 
 
S获取CSS属性值 
  
 
  

sdf

 
  
 
 
 当然，如果您是引用外部的css文件同样适用。
 另：可以将上面的方法简化为
 JavaScript代码
function getDefaultStyle(obj,attribute){ //返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性  
returnobj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];  
} 
js修改css详解 Js与CSS工具 expression将JS、Css结合起来 CSS阴影详解 Css Filter Alpha 属性详解 CSS浮动属性Float详解 CSS JS实现的选项卡效果(html组件)-网页陶吧-CSS-天极Yesky CSS中的ul与li样式详解 line-height详解 - 蜗爱CSS {CSS}CSS之margin属性由浅入深详解_div+css布局教程 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示 linux的hostname修改详解 CSS css CSS 圆角边框详解a - kuning - 博客园 大忽悠JS将失效 显卡帝详解显卡全参数 后缀是smf,ax,exe,ttf,ocx,js,css，swf,是些什么格式？还有其它的吗？都是些干什么用的？ json.js JS 日历 采穗圃js 常用js 详解CSS网页布局中默认字体样式 - 免费下载 连邦IT服务平台 CSS文本溢出省略号：text-overflow:ellipsis及firefox兼容详解 js获取下拉列表选中项的值和文本(select)以及获取单选按钮(radio)组的值和修改选中项