js控制CSS样式属性语法对照表

CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。

例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于：.ad{ display:none}.

下面就是JS 控制CSS样式表的语法对照：

























































































































































































CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 
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 
float floatStyle 
margin margin 
margin-bottom marginBottom 
margin-left marginLeft 
margin-right marginRight 
margin-top marginTop 
padding padding 
padding-bottom paddingBottom 
padding-left paddingLeft 
padding-right paddingRight 
padding-top paddingTop
background background 
background-attachment backgroundAttachment 
background-color backgroundColor 
background-image backgroundImage 
background-position backgroundPosition 
background-repeat backgroundRepeat 
color color 
display display 
list-style-type listStyleType 
list-style-image listStyleImage 
list-style-position listStylePosition 
list-style listStyle 
white-space whiteSpace 
font font 
font-family fontFamily 
font-size fontSize 
font-style fontStyle 
font-variant fontVariant 
font-weight fontWeight 
letter-spacing letterSpacing 
line-break lineBreak 
line-height lineHeight 
text-align textAlign 
text-decoration textDecoration 
text-indent textIndent 
text-justify textJustify 
text-transform textTransform 
vertical-align verticalAlign

赞 (0)

相关推荐

  • js中巧用cssText属性批量操作样式

    给一个HTML元素设置css属性,如 复制代码 代码如下: var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block"; 这样写太罗嗦了,为了简单些写个工具函数,如 复制代码 代码如下: function setStyle(obj,c

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • js中用cssText设置css样式的简单方法

    如果网页中一个 id为"no"的标签,暂且当div标签来tell: 想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no'); obj.style.width = '400px'; obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把. 一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

  • js控制CSS样式属性语法对照表

    CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于:.ad{ display:none}. 下面就是JS 控制CSS样式表的语法对照: CSS语法 (不区分大小写) JavaScript语法 (区分大小写)  border border  border-bott

  • JS控制CSS样式的方法

    群里的兄弟问的效果 无标题文档 p.p1{ background-color:#FF0000;font-size:22px;_ font-family:"方正舒体"; font-weight:100; } function remove(){ var wc = document.styleSheets[0], i; for (i = 0 ; i hello,this is a example of stylesheets hello,this is a example of style

  • 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)

    jquery控制CSS样式,并且取消Css样式(如背景色)   $("#tab1").css("background-color", "");   $("#" + left_tabid).css("background-color", "#025891");

  • 原生js更改css样式的两种方式

    原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • JS设置CSS样式的方式汇总

    1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100); element.setAttribute

  • JS获取CSS样式（style/getComputedStyle/currentStyle）

    CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar

  • JS读写CSS样式的方法汇总

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如:var elm = document.getElementById('test');       elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().remo

  • 如何用js控制css中的float的代码

    ie里面用styleFloat 其他用cssFloat 本文向大家简单介绍一下JS操作css的float属性的特殊写法,对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. Js style float JS操作css的float属性的特殊写法 使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,ob

随机推荐