在写javascript中,经常要用到style对象的css属性,很多不记得
其实很好记,基本就是CSS中的“-”转化为javascript的驼峰写法,除了注意下float
盒子标签和属性对照
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中的float属性是个例外,因为float是javascript的保留关键字,在IE中使用的是styleFloat,而其他浏览器则使用cssFloat.
分享到:
相关推荐
本文将详细介绍CSS中的样式属性与JavaScript中对应的`style`属性之间的关系,并通过具体示例帮助读者更好地理解和应用这些属性。 #### CSS与JavaScript中的Style属性对照 以下是对CSS和JavaScript中style属性的...
本篇将详细介绍如何通过 JavaScript 来操作 CSS 的各种标签和属性。 ### 边框属性 在 CSS 中,边框可以通过 `border` 属性进行设置,包括 `border-width`、`border-style` 和 `border-color`。在 JavaScript 中,...
CSS(层叠样式表)是用于控制网页元素样式和布局的语言。在实现Tab组件时,CSS主要负责以下几个方面: 1. **布局**:CSS可以定义Tab按钮和内容区域的布局,比如使用Flexbox或Grid布局,使得它们在页面上整齐排列。 ...
在网页设计和开发中,CSS(层叠样式表)和JavaScript是两个不可或缺的工具。CSS主要负责页面的布局和外观,而JavaScript则用于增加交互性和动态功能。它们之间有一些属性是可以相互对应的,使得开发者可以通过...
### CSS与JavaScript Style属性对照表解析 在网页开发过程中,我们经常会遇到需要通过JavaScript来动态修改元素样式的场景。为了确保代码的正确性和兼容性,理解CSS属性与JavaScript中的style对象属性之间的映射...
JavaScript访问CSS属性主要涉及两种方式:通过元素访问和直接访问样式表,以及一个重要的概念——运行时样式。这两种方法在JavaScript中用于动态操作网页样式,提供了丰富的可能性。 1. **通过元素访问** 这种方式...
本文将详细解析CSS和JavaScript中的style属性对照表,这对于JS开发者理解和操作DOM元素的样式非常有帮助。 1. **边框属性(Border Properties)** - CSS 中,设置边框的属性如 `border`, `border-bottom`, `border...
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材,旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现,提供了丰富的实践材料,使学习者能够通过实际...
- **JavaScript**: 该属性没有直接对应的JavaScript属性,但可以通过修改CSS类来间接实现。 **1.6 浮动(`float`)** - **CSS**: `float` 属性使元素脱离文档流并移到其父元素的一侧。 - **JavaScript**: 对于浮动,...
2. 属性和值:CSS由属性和对应的值组成,例如`color`属性用于设置文字颜色,值可以是颜色名称、十六进制代码或RGB值。 3. 层叠性:CSS的“级联”特性意味着多个样式可以应用于一个元素,当存在冲突时,根据特定规则...
此外,`LuckDraw`可能是包含这些代码文件的文件夹或主文件名,里面可能有HTML、CSS和JavaScript文件,分别对应页面结构、样式和逻辑。 总之,JavaScript大转盘是一个结合了HTML布局、CSS动画和JavaScript事件处理的...
在这个例子中,当页面加载完成后,JavaScript会创建一个新的`<link>`元素,设置其`rel`属性为"stylesheet"表示这是一个样式表链接,然后设置`href`属性指向CSS文件的URL。最后,这个新的`<link>`元素被添加到`<head>...
`:css`选择器允许你指定一个CSS属性和对应的值。 此外,jQuery还提供了`.filter()`方法,允许你提供自定义的过滤函数来筛选元素: ```javascript var redElements = $('*').filter(function() { return $(this)....
`表示空格,`<a name>`定义锚记,`target="_blank"`使链接在新窗口打开,`<ul>`创建无序列表,`<form>`定义表单,`type="checkbox"`和`type="radio"`分别对应复选框和单选框,`checked`属性用于设置元素默认选中,`...
JavaScript、HTML和CSS是构建网页和Web应用的三大核心技术。这个压缩包文件包含了关于这三门语言的详尽帮助文档,对于学习和开发工作来说,无疑是一份宝贵的资源。 JavaScript,一种轻量级的解释型编程语言,是网页...
【CSS标签切换】是一种网页设计中的布局技巧,它允许用户通过点击不同的标签或链接来切换显示不同的内容,而无需加载新的页面。这种技术被广泛应用于新闻网站、产品介绍页、文章分类展示等场景,能够有效地节省空间...
CSS的兼容性问题主要集中在不同的浏览器对某些CSS属性的支持程度上。例如,盒模型、渐变、阴影、动画和Flexbox等特性在早期浏览器中的实现可能存在差异。为了解决这些问题,我们可以采用以下策略: 1. **浏览器前缀...
"javascript+css实现的离开网站时显示模态弹窗特效源码"是一个这样的解决方案,它结合了JavaScript的事件监听和CSS的样式设计,为用户提供了一种动态且引人注目的体验。 JavaScript是网页交互的核心,它可以监听...