在写javascript中,经常要用到style对象的css属性,很多不记得
其实很好记,基本就是CSS中的“-”转化为javascript的驼峰写法,除了注意下float
盒子标签和属性对照颜色和背景标签和属性对照样式标签和属性对照文字样式标签和属性对照文本标签和属性对照
可以500%提高开发效率的前端UI框架! 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 |
可以500%提高开发效率的前端UI框架! 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属性的...
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材,旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现,提供了丰富的实践材料,使学习者能够通过实际...
### CSS与JavaScript Style属性对照表解析 在网页开发过程中,我们经常会遇到需要通过JavaScript来动态修改元素样式的场景。为了确保代码的正确性和兼容性,理解CSS属性与JavaScript中的style对象属性之间的映射...
本文将详细解析CSS和JavaScript中的style属性对照表,这对于JS开发者理解和操作DOM元素的样式非常有帮助。 1. **边框属性(Border Properties)** - CSS 中,设置边框的属性如 `border`, `border-bottom`, `border...
本篇将详细介绍如何通过 JavaScript 来操作 CSS 的各种标签和属性。 ### 边框属性 在 CSS 中,边框可以通过 `border` 属性进行设置,包括 `border-width`、`border-style` 和 `border-color`。在 JavaScript 中,...
在网页设计和开发中,CSS(层叠样式表)和JavaScript是两个不可或缺的工具。CSS主要负责页面的布局和外观,而JavaScript则用于增加交互性和动态功能。它们之间有一些属性是可以相互对应的,使得开发者可以通过...
此外,`LuckDraw`可能是包含这些代码文件的文件夹或主文件名,里面可能有HTML、CSS和JavaScript文件,分别对应页面结构、样式和逻辑。 总之,JavaScript大转盘是一个结合了HTML布局、CSS动画和JavaScript事件处理的...
2. 属性和值:CSS由属性和对应的值组成,例如`color`属性用于设置文字颜色,值可以是颜色名称、十六进制代码或RGB值。 3. 层叠性:CSS的“级联”特性意味着多个样式可以应用于一个元素,当存在冲突时,根据特定规则...
CSS(层叠样式表)是用于控制网页元素样式和布局的语言。在实现Tab组件时,CSS主要负责以下几个方面: 1. **布局**:CSS可以定义Tab按钮和内容区域的布局,比如使用Flexbox或Grid布局,使得它们在页面上整齐排列。 ...
根据韩顺平的《轻松搞定网页设计HTML+CSS+JAVASCRIPT》HTML学习笔记.pdf,我们可以总结出以下HTML基础知识点: 1. HTML基本结构:HTML文档的基本结构包括、、三部分,其中是根元素,用于存放元数据,用于存放页面...
【HTML+CSS+JavaScript 仿B站首页】项目是一个典型的前端网页开发实例,它结合了三个核心技术:HTML(超文本标记语言)、CSS(层叠样式表)和JavaScript,用于构建一个与哔哩哔哩(B站)首页类似的交互式用户界面。...
选择器包括标签选择器、类选择器(`.myclass`)和ID选择器(`#hhh`),它们分别对应HTML元素的标签名、`class`属性和`id`属性。CSS的优先级:行内式 > 内联式 > 外链式。 JavaScript是实现网页动态交互的关键,它...
实际上,当点击不同的Tab项时,JavaScript会修改对应内容区域`<div>`的CSS类或者直接改变其CSS属性,如`display`或`opacity`,以达到只显示一个内容区域而隐藏其他区域的目的。这种控制逻辑是实现Tab切换功能的核心...
- **JavaScript**: 该属性没有直接对应的JavaScript属性,但可以通过修改CSS类来间接实现。 **1.6 浮动(`float`)** - **CSS**: `float` 属性使元素脱离文档流并移到其父元素的一侧。 - **JavaScript**: 对于浮动,...
5. 游戏对象和状态管理:在JavaScript中,每个游戏元素(如坦克、子弹、砖块)都可以被表示为对象,这些对象包含其属性(如位置、速度、生命值等)和方法(如移动、射击)。游戏的状态管理则涉及到如何跟踪和更新...
当新的标签加入时,只需要在HTML中添加对应的`<div>`元素,CSS和JavaScript可以自动适应这些变化。此外,通过模块化和组件化的开发方式,可以将标签云作为一个独立的组件复用在不同的页面或项目中。 总结来说,纯...
通过这个项目,你不仅可以深化对HTML、CSS和JavaScript的理解,还能提高解决实际问题的能力,为开发更复杂、交互性强的Web应用程序打下坚实基础。无论你是初学者还是有一定经验的开发者,这个项目都将帮助你提升表单...
在这个例子中,当页面加载完成后,JavaScript会创建一个新的`<link>`元素,设置其`rel`属性为"stylesheet"表示这是一个样式表链接,然后设置`href`属性指向CSS文件的URL。最后,这个新的`<link>`元素被添加到`<head>...