`
jinxhj2003
  • 浏览: 148956 次
  • 性别: Icon_minigender_1
  • 来自: 南昌
社区版块
存档分类
最新评论

JavaScript CSS Style属性对照表 盒子标签和属性对照

    博客分类:
  • js
阅读更多
转自:http://www.01on.com/a/488.htmlXML/HTML

代码

document.getElementById(’txttip’).style.text-align=‘center’;  

但IE报错,不知什么原因,后来多方查找,才明的是javascript中的连接符的问题。因为属性"text-align"中间有一个连接符"-",在JS中不能直接这样写,在javascript中必须去掉连字符,两边直接连在一起写,但后面的部分第一个字母要大字,也就是写成"textAlign",于是上面的代码改写成:


XML/HTML代码document.getElementById(’txttip’).style.textAlign=‘center’;

附加:CSS属性与JavaScript编码对照表
     CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。     比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:JavaScript中style后面的属性应该是什么?<script type="text/javascript">        function imageOver(e) {            e.style.border="1px solid red";        }        function imageOut(e) {            e.style.borderWidth=0;        }    </script> <img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />        JavaScript CSS Style属性对照表    
盒子标签和属性对照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      
颜色和背景标签和属性对照CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) background   background
background-attachment   backgroundAttachment
background-color   backgroundColor
background-image   backgroundImage
background-position   backgroundPosition
background-repeat   backgroundRepeat
color   color      
样式标签和属性对照CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) display   display
list-style-type   listStyleType
list-style-image   listStyleImage
list-style-position   listStylePosition
list-style   listStyle
white-space   whiteSpace      
文字样式标签和属性对照CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) font   font
font-family   fontFamily
font-size   fontSize
font-style   fontStyle
font-variant   fontVariant
font-weight   fontWeight      
文本标签和属性对照CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) 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


分享到:
评论

相关推荐

    JavaScript CSS Style属性对照表

    ### JavaScript CSS Style属性对照表详解 #### 一、引言 在前端开发中,通过JavaScript动态地更改HTML元素的CSS属性是一种常见的需求。这不仅能够提高网页的交互性,还能帮助开发者实现更加复杂的视觉效果。本文将...

    CSS和JavaScript标签style属性对照表

    下面我们将详细讨论这些标签和属性的对照,并提供一些基本的使用方法。 **盒子模型属性:** CSS中的盒子模型包括边框(border)、清除(clear)、浮动(float)、外边距(margin)和内边距(padding)。这些属性在...

    JS中的CSS_Style属性标签对照表

    在JavaScript中,可以通过元素的`style`属性来访问和修改这些CSS属性,例如: ```javascript element.style.backgroundColor = "blue"; element.style.fontSize = "20px"; ``` 这使得JavaScript与CSS结合使用时,...

    js控制css属性对照表

    DOM提供了许多方法和属性来读取或修改元素的CSS样式,如`element.style.color = 'red';`。 ##### 2.3 对照表简介 下面的对照表列出了常见的CSS属性及其对应的JavaScript DOM属性形式。这些属性分为几大类:盒子...

    CSS和JavaScript标签对照表

    ### CSS与JavaScript标签对照知识点详解 #### 一、盒子模型属性对照 在Web开发中,理解和掌握CSS(层叠样式表)与JavaScript之间的交互是非常重要的。下面我们将详细探讨CSS与JavaScript在处理盒子模型属性时的...

    CSS和JS对照表

    #### 一、盒子模型标签和属性对照 在Web开发中,理解CSS盒模型对于布局至关重要。盒模型由多个部分组成:边框(`border`)、填充(`padding`)、边界(`margin`)以及清除(`clear`)等。 **1.1 边框(`border`)** - **CSS...

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

    CSS与JS紧密配合,为我们的页面增添了很多别致的效果。...盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-botto

    js style对照表

    本文将深入解析JS style对照表,帮助开发者更熟练地使用JS来修改元素的CSS样式。 #### 盒子模型属性 - **边框属性**:CSS中的`border`属性在JS中对应`border`,但当具体到颜色、样式或宽度时,如`border-bottom-...

    CSS和JS标签style属性对照表(方便js开发的朋友)

    盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle ...

    js中css对照表

    ### JavaScript与CSS属性对照表详解 #### 前言 在Web开发中,JavaScript与CSS是两个非常重要的技术。为了更好地实现动态效果和交互性,开发者经常需要通过JavaScript来操作DOM元素的样式。这就涉及到了JavaScript...

Global site tag (gtag.js) - Google Analytics