`
z_piaoyi
  • 浏览: 22948 次
  • 性别: Icon_minigender_2
  • 来自: 河北
社区版块
存档分类
最新评论

JavaScript CSS Style属性对照表

 
阅读更多

为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性。比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:

  JavaScript代码

<scripttype="text/javascript">  
  functionimageOver(e){  
    e.style.border="1pxsolidred";  
  }  
  functionimageOut(e){  
    e.style.borderWidth=0;  
  }  
</script>  
<imgsrc="phplamp.gif"onmouseover="imageOver(this)"onmouseout="imageOut(this)"/>

  JavaScript中style后面的属性应该是什么?

  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
分享到:
评论

相关推荐

    CSS和JavaScript标签style属性对照表

    ### CSS与JavaScript中style属性对照表详解 #### 引言 在前端开发中,CSS(层叠样式表)和JavaScript是构建动态、交互式网页的关键技术。为了更好地控制页面元素的样式,开发者经常需要通过JavaScript来操作DOM...

    CSS 和 JavaScript 标签 style 属性对照表

    CSS 和 JavaScript 标签 style 属性对照表,以及js的事件列表与解说

    Javascript和Css属性对照

    JavaScript 和 CSS 是...记住,学习 JavaScript 和 CSS 的属性对照不仅仅是了解它们的用法,还要深入理解其工作原理,这样才能在面对复杂需求时游刃有余。同时,不断实践和优化代码,才能真正掌握这两门语言的精髓。

    js控制css属性对照表

    ### JavaScript 控制 CSS 属性对照表详解 #### 一、前言 在前端开发中,JavaScript(简称JS)与CSS的交互是实现动态效果的重要手段之一。通过JS操作DOM元素来改变其CSS样式,可以轻松地实现动画效果、响应式布局...

    CSS和JS标签style属性对照表

    ### CSS与JavaScript Style属性对照表解析 在网页开发过程中,我们经常会遇到需要通过JavaScript来动态修改元素样式的场景。为了确保代码的正确性和兼容性,理解CSS属性与JavaScript中的style对象属性之间的映射...

    CSS属性在Javascript中对应表

    - CSS自定义属性可以在JavaScript中通过`element.style.getPropertyValue('--custom-var')`获取,或者用`element.style.setProperty('--custom-var', 'value')`设置。 10. **事件处理**: - JavaScript的`...

    JS中的CSS_Style属性标签对照表

    在JavaScript中,与CSS Style相关的属性常常用于动态地改变网页元素的样式。下面将详细介绍这些属性,分为四个主要部分:盒子模型属性、颜色和背景属性、样式属性以及文字样式和文本属性。 1. 盒子模型属性: - `...

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

    本文将详细解析CSS和JavaScript中的style属性对照表,这对于JS开发者理解和操作DOM元素的样式非常有帮助。 1. **边框属性(Border Properties)** - CSS 中,设置边框的属性如 `border`, `border-bottom`, `border...

    JS中的CSS_Style属性标签对照表.docx 含有CSS 的详细属性说明

    在JavaScript中,对元素的CSS样式进行操作是常见的任务,这通常涉及到`element.style`对象。这个对象允许我们直接访问和修改元素的内联样式。下面是对标题和描述中提到的一些CSS Style属性在JS中的详细解释: 1. **...

    javascript与css标签对照表

    CSS(层叠样式表)用于定义网页元素的样式,而 JavaScript 则是一种脚本语言,允许动态地改变这些样式。本篇将详细介绍如何通过 JavaScript 来操作 CSS 的各种标签和属性。 ### 边框属性 在 CSS 中,边框可以通过 ...

    CSS与JS属性对照表

    在网页设计和开发中,CSS(层叠样式表)和JavaScript是两个不可或缺的工具。CSS主要负责页面的布局和外观,而JavaScript则用于增加交互性和动态功能。它们之间有一些属性是可以相互对应的,使得开发者可以通过...

    CSS和JavaScript标签对照表

    在Web开发中,理解和掌握CSS(层叠样式表)与JavaScript之间的交互是非常重要的。下面我们将详细探讨CSS与JavaScript在处理盒子模型属性时的区别。 ##### **1.1 边框属性** - **CSS语法**:`border`, `border-...

    CSS和JS对照表

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

    CSS-JS对照表

    在网页设计和开发中,CSS (层叠样式表) 和 JavaScript 是两个至关重要的技术。CSS 负责页面的布局和样式,而 JavaScript 则用于交互性和动态效果。本篇文章将详细对比 CSS 和 JavaScript 中的一些常见标签和属性,...

Global site tag (gtag.js) - Google Analytics