CSS和JavaScript标签style属性对照表（用javascript来控制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
颜色和背景标签和属性对照
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
补充:
在建设网站的过程中，有时难免会要用js来控制css,其实这是十分简单的看下面的例子。
html:<div id="my_div" style="background-color:red">js控制css</div>
js:document.getElementById("my_div").style.backgroundColor="red"
其实就是用style对象访问css属性，值得注意的是样式属性的写法在css里是background-color,但是在js里就是backgroundColor,一般情况是把"_"去掉，第二个字母用大写。
如果用的是外联样式表，就用currentStyle对象代替style对象。如：
document.getElementById("my_div").currentStyle.backgroundColor="red"
一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试了</title>
<script type="text/javascript">
function divFloatRight(e) {
e.style.backgroundColor = "#ff0000";
e.style.styleFloat = "right";//IE
e.style.cssFloat = "right";//firefox and others explorer
}
function divFloatLeft(e) {
e.style.backgroundColor = "transparent";
e.style.styleFloat = "left";
e.style.cssFloat = "left";
}
</script>
</head>
<body>
<div>
<div id="demo" style="border: dashed 1px #000000;" onmousemove="divFloatRight(this);"
onclick="divFloatLeft(this);">
JavaScript控制div的float属性，onmousemove~float:right,onclick~float:left。
</div>
</div>
</body>
</html>
分享到：
相关推荐
### CSS与JavaScript中style属性对照表详解 #### 引言 在前端开发中，CSS（层叠样式表）和JavaScript是构建动态、交互式网页的关键技术。为了更好地控制页面元素的样式，开发者经常需要通过JavaScript来操作DOM...
CSS 和 JavaScript 标签 style 属性对照表，以及js的事件列表与解说
### JavaScript CSS Style属性对照表详解 #### 一、引言 在前端开发中，通过JavaScript动态修改CSS属性是一种常见的操作手法。例如，在用户交互时改变元素的样式来增强用户体验。本文将详细介绍如何利用JavaScript...
### CSS与JavaScript Style属性对照表解析 在网页开发过程中，我们经常会遇到需要通过JavaScript来动态修改元素样式的场景。为了确保代码的正确性和兼容性，理解CSS属性与JavaScript中的style对象属性之间的映射...
本文将详细解析CSS和JavaScript中的style属性对照表，这对于JS开发者理解和操作DOM元素的样式非常有帮助。 1. **边框属性（Border Properties）** - CSS 中，设置边框的属性如 `border`, `border-bottom`, `border...
javaScript属性与CSS属性对照表，一般来说javascript与css的属性只要稍微改动一下就可以用了。
在实际开发中，常常需要结合使用 JavaScript 和 CSS，比如响应式设计、交互式组件、动画效果等。通过 `javascipt和css属性对照.doc` 文件，你可以系统地学习并对比这两种语言的属性，进一步提升你的前端技能。 记住...
### CSS与JavaScript标签对照知识点详解 #### 一、盒子模型属性对照 在Web开发中，理解和掌握CSS（层叠样式表）与JavaScript之间的交互是非常重要的。下面我们将详细探讨CSS与JavaScript在处理盒子模型属性时的...
在JavaScript中，可以通过元素的`style`属性来访问和修改这些CSS属性，例如： ```javascript element.style.backgroundColor = "blue"; element.style.fontSize = "20px"; ``` 这使得JavaScript与CSS结合使用时，...
- `transition`和`animation`：虽然在CSS中定义，但在JavaScript中可以使用`element.style.transition`和`element.style.animation`来启动或停止动画效果。 8. **响应式设计**： - `media queries`：在JavaScript...
### JavaScript 控制 CSS 属性对照表详解 #### 一、前言 在前端开发中，JavaScript（简称JS）与CSS的交互是实现动态效果的重要手段之一。通过JS操作DOM元素来改变其CSS样式，可以轻松地实现动画效果、响应式布局...
在JavaScript中，对元素的CSS样式进行操作是常见的任务，这通常涉及到`element.style`对象。这个对象允许我们直接...在实际编程中，我们可以通过`element.style.property = value`的形式来设置或获取这些CSS属性的值。
本篇将详细介绍如何通过 JavaScript 来操作 CSS 的各种标签和属性。 ### 边框属性 在 CSS 中，边框可以通过 `border` 属性进行设置，包括 `border-width`、`border-style` 和 `border-color`。在 JavaScript 中，...
再来看样式标签和属性： 1. CSS中用于控制元素显示方式的`display`属性，在JavaScript中同样为`display`。可以用来设置元素的显示类型，比如`block`、`inline`、`none`等。 CSS: ```css .element { display: ...
CSS与JS属性对照表,CSS 属性对照表是 js 初学者必备的基础知识.CSS与JS紧密配合,为我们的页面增添了很多别致的效果,为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性CSS与JS紧密配合
4. 样式标签和属性： - `display`属性在CSS中用于控制元素的显示方式，例如`display: none;`。JavaScript中的`style.display`可用来更改此属性。 - `list-style-type`, `list-style-image`, `list-style-position`...