为了达到某种特殊的效果我们需要用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是构建动态、交互式网页的关键技术。为了更好地控制页面元素的样式,开发者经常需要通过JavaScript来操作DOM...
CSS 和 JavaScript 标签 style 属性对照表,以及js的事件列表与解说
JavaScript 和 CSS 是...记住,学习 JavaScript 和 CSS 的属性对照不仅仅是了解它们的用法,还要深入理解其工作原理,这样才能在面对复杂需求时游刃有余。同时,不断实践和优化代码,才能真正掌握这两门语言的精髓。
### JavaScript 控制 CSS 属性对照表详解 #### 一、前言 在前端开发中,JavaScript(简称JS)与CSS的交互是实现动态效果的重要手段之一。通过JS操作DOM元素来改变其CSS样式,可以轻松地实现动画效果、响应式布局...
### CSS与JavaScript Style属性对照表解析 在网页开发过程中,我们经常会遇到需要通过JavaScript来动态修改元素样式的场景。为了确保代码的正确性和兼容性,理解CSS属性与JavaScript中的style对象属性之间的映射...
- CSS自定义属性可以在JavaScript中通过`element.style.getPropertyValue('--custom-var')`获取,或者用`element.style.setProperty('--custom-var', 'value')`设置。 10. **事件处理**: - JavaScript的`...
在JavaScript中,与CSS Style相关的属性常常用于动态地改变网页元素的样式。下面将详细介绍这些属性,分为四个主要部分:盒子模型属性、颜色和背景属性、样式属性以及文字样式和文本属性。 1. 盒子模型属性: - `...
本文将详细解析CSS和JavaScript中的style属性对照表,这对于JS开发者理解和操作DOM元素的样式非常有帮助。 1. **边框属性(Border Properties)** - CSS 中,设置边框的属性如 `border`, `border-bottom`, `border...
在JavaScript中,对元素的CSS样式进行操作是常见的任务,这通常涉及到`element.style`对象。这个对象允许我们直接访问和修改元素的内联样式。下面是对标题和描述中提到的一些CSS Style属性在JS中的详细解释: 1. **...
CSS(层叠样式表)用于定义网页元素的样式,而 JavaScript 则是一种脚本语言,允许动态地改变这些样式。本篇将详细介绍如何通过 JavaScript 来操作 CSS 的各种标签和属性。 ### 边框属性 在 CSS 中,边框可以通过 ...
在网页设计和开发中,CSS(层叠样式表)和JavaScript是两个不可或缺的工具。CSS主要负责页面的布局和外观,而JavaScript则用于增加交互性和动态功能。它们之间有一些属性是可以相互对应的,使得开发者可以通过...
在Web开发中,理解和掌握CSS(层叠样式表)与JavaScript之间的交互是非常重要的。下面我们将详细探讨CSS与JavaScript在处理盒子模型属性时的区别。 ##### **1.1 边框属性** - **CSS语法**:`border`, `border-...
### CSS与JS对照表知识点详解 #### 一、盒子模型标签和属性对照 在Web开发中,理解CSS盒模型对于布局至关重要。盒模型由多个部分组成:边框(`border`)、填充(`padding`)、边界(`margin`)以及清除(`clear`)等。 **...
在网页设计和开发中,CSS (层叠样式表) 和 JavaScript 是两个至关重要的技术。CSS 负责页面的布局和样式,而 JavaScript 则用于交互性和动态效果。本篇文章将详细对比 CSS 和 JavaScript 中的一些常见标签和属性,...