CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。
例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于:.ad{ display:none}.
下面就是JS 控制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 |
background |
background |
background-attachment |
backgroundAttachment |
background-color |
backgroundColor |
background-image |
backgroundImage |
background-position |
backgroundPosition |
background-repeat |
backgroundRepeat |
color |
color |
display |
display |
list-style-type |
listStyleType |
list-style-image |
listStyleImage |
list-style-position |
listStylePosition |
list-style |
listStyle |
white-space |
whiteSpace |
font |
font |
font-family |
fontFamily |
font-size |
fontSize |
font-style |
fontStyle |
font-variant |
fontVariant |
font-weight |
fontWeight |
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与JS紧密配合,为...下面就是JS 控制CSS样式表的语法对照: 盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-botto
### JavaScript与CSS属性对照表详解 #### 前言 在Web开发中,JavaScript与CSS是两个非常重要的技术。为了更好地实现动态效果和交互性,开发者经常需要通过JavaScript来操作DOM元素的样式。这就涉及到了JavaScript...
通过本文的介绍,我们可以看到,在JavaScript中动态更改HTML元素的CSS样式非常方便。只需要记住CSS属性名到JavaScript属性名的转换规则,即可轻松实现动态效果。此外,掌握这些基本的属性对照表对于提高前端开发效率...
本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
通过以上详细对比,我们可以清晰地了解到CSS与JavaScript之间对于同一属性的不同表示方法,这对于实际开发中进行动态样式修改是非常有用的。希望这些知识点能帮助你在Web开发中更加高效地工作。
标题中的"DHTML, js, css资料"指的是网页开发中的三个核心技术:动态超文本标记语言(Dynamic HTML,简称DHTML)、JavaScript和层叠样式表(Cascading Style Sheets,简称CSS)。这些技术是构建现代交互式网页的基础...
在网页设计和开发中,CSS(层叠样式表)和JavaScript是两个至关重要的技术。CSS用于定义页面元素的样式,而JavaScript则提供了交互性。两者结合可以创建动态、响应式的用户体验。下面我们将详细讨论这些标签和属性的...
在学习过程中,建议首先掌握HTML的基本语法和元素,然后学习CSS的布局技巧和样式控制,最后深入JavaScript,熟悉其语法和常用库、框架的应用。同时,不断练习编写代码,对照源码分析,逐步提高自己的网页设计和制作...
Prettify 是 Google 推出的一个开源项目,主要用于 JavaScript、CSS 和 HTML 等编程语言的语法高亮。在网页开发中,代码高亮能够帮助开发者更快速地理解和分析代码,提高工作效率。 **Prettify 的工作原理**: ...
综上所述,这个压缩包包含了关于前端开发的多个重要方面:CSS2作为网页样式的基础,JS和VBS提供了动态功能,而配色常识则有助于提升设计质量。无论是初学者还是经验丰富的开发者,都可以从这些资料中受益匪浅,提升...
CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width ...
在React Native中,虽然主要使用JavaScript来编写用户界面,但仍然支持类似CSS的样式语法,这使得React Native开发者可以借鉴他们在Web开发中的经验。 然而,鸿蒙系统(HarmonyOS)的开发环境和RN有所不同,它有...
本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
标题中的“CSS技巧与工具(EditPlus语法文件下载)”暗示了我们即将探讨的是关于CSS(Cascading Style Sheets)的高效编程方法以及EditPlus编辑器在其中的作用。CSS是一种用于描述HTML或XML(包括如SVG、MathML等各种...
在IT行业中,PS、CSS、JS和PHP是四个非常关键的技术领域,它们分别代表了图像处理、网页样式、前端交互和后端开发的核心工具。下面将详细解释这些领域的常用操作、方法和属性。 首先,Photoshop(PS)是Adobe公司...
【标题】"收藏 CSS JS VBS 参考手册" 是一个综合性的资源集合,涵盖了三种在Web开发中至关重要的编程语言和技术:CSS(层叠样式表)、JavaScript和VBScript。这些参考手册通常包含了详尽的语法说明、示例代码以及...
3. **CSS基础**:CSS用于设计网页样式,你需要了解选择器的概念,学会如何定义颜色、字体、边距、布局等样式属性。此外,掌握盒模型、浮动、定位、响应式设计(适配不同设备屏幕)等高级技巧,能让你的设计更加专业...