`
webcode
  • 浏览: 6101866 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Javascript和CSS的标签属性对应表

 
阅读更多

在写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属性对照 以下是对CSS和JavaScript中style属性的...

    javascript与css标签对照表

    本篇将详细介绍如何通过 JavaScript 来操作 CSS 的各种标签和属性。 ### 边框属性 在 CSS 中,边框可以通过 `border` 属性进行设置,包括 `border-width`、`border-style` 和 `border-color`。在 JavaScript 中,...

    javascript+css 实现的web tab

    CSS(层叠样式表)是用于控制网页元素样式和布局的语言。在实现Tab组件时,CSS主要负责以下几个方面: 1. **布局**:CSS可以定义Tab按钮和内容区域的布局,比如使用Flexbox或Grid布局,使得它们在页面上整齐排列。 ...

    CSS与JS属性对照表

    在网页设计和开发中,CSS(层叠样式表)和JavaScript是两个不可或缺的工具。CSS主要负责页面的布局和外观,而JavaScript则用于增加交互性和动态功能。它们之间有一些属性是可以相互对应的,使得开发者可以通过...

    CSS和JS标签style属性对照表

    ### CSS与JavaScript Style属性对照表解析 在网页开发过程中,我们经常会遇到需要通过JavaScript来动态修改元素样式的场景。为了确保代码的正确性和兼容性,理解CSS属性与JavaScript中的style对象属性之间的映射...

    JavaScript访问CSS属性的几种方式介绍_.docx

    JavaScript访问CSS属性主要涉及两种方式:通过元素访问和直接访问样式表,以及一个重要的概念——运行时样式。这两种方法在JavaScript中用于动态操作网页样式,提供了丰富的可能性。 1. **通过元素访问** 这种方式...

    CSS和JS标签style属性对照表(方便js开发的朋友).docx

    本文将详细解析CSS和JavaScript中的style属性对照表,这对于JS开发者理解和操作DOM元素的样式非常有帮助。 1. **边框属性(Border Properties)** - CSS 中,设置边框的属性如 `border`, `border-bottom`, `border...

    《html+css+javascript 网页制作案例教程》源代码

    《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材,旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现,提供了丰富的实践材料,使学习者能够通过实际...

    CSS和JS对照表

    - **JavaScript**: 该属性没有直接对应的JavaScript属性,但可以通过修改CSS类来间接实现。 **1.6 浮动(`float`)** - **CSS**: `float` 属性使元素脱离文档流并移到其父元素的一侧。 - **JavaScript**: 对于浮动,...

    css与JavaScript基础

    2. 属性和值:CSS由属性和对应的值组成,例如`color`属性用于设置文字颜色,值可以是颜色名称、十六进制代码或RGB值。 3. 层叠性:CSS的“级联”特性意味着多个样式可以应用于一个元素,当存在冲突时,根据特定规则...

    JavaScript大转盘代码html+css+JavaScript

    此外,`LuckDraw`可能是包含这些代码文件的文件夹或主文件名,里面可能有HTML、CSS和JavaScript文件,分别对应页面结构、样式和逻辑。 总之,JavaScript大转盘是一个结合了HTML布局、CSS动画和JavaScript事件处理的...

    JavaScript动态添加css样式和script标签

    在这个例子中,当页面加载完成后,JavaScript会创建一个新的`<link>`元素,设置其`rel`属性为"stylesheet"表示这是一个样式表链接,然后设置`href`属性指向CSS文件的URL。最后,这个新的`<link>`元素被添加到`<head>...

    Javascript获取相同CSS样式的元素

    `:css`选择器允许你指定一个CSS属性和对应的值。 此外,jQuery还提供了`.filter()`方法,允许你提供自定义的过滤函数来筛选元素: ```javascript var redElements = $('*').filter(function() { return $(this)....

    html_JavaScript_css试题.pdf

    `表示空格,`<a name>`定义锚记,`target="_blank"`使链接在新窗口打开,`<ul>`创建无序列表,`<form>`定义表单,`type="checkbox"`和`type="radio"`分别对应复选框和单选框,`checked`属性用于设置元素默认选中,`...

    这个帮助文档包括javascript html 和css的很全

    JavaScript、HTML和CSS是构建网页和Web应用的三大核心技术。这个压缩包文件包含了关于这三门语言的详尽帮助文档,对于学习和开发工作来说,无疑是一份宝贵的资源。 JavaScript,一种轻量级的解释型编程语言,是网页...

    CSS标签切换代码实例教程 比较漂亮.

    【CSS标签切换】是一种网页设计中的布局技巧,它允许用户通过点击不同的标签或链接来切换显示不同的内容,而无需加载新的页面。这种技术被广泛应用于新闻网站、产品介绍页、文章分类展示等场景,能够有效地节省空间...

    HTML标签和CSS兼容举例

    CSS的兼容性问题主要集中在不同的浏览器对某些CSS属性的支持程度上。例如,盒模型、渐变、阴影、动画和Flexbox等特性在早期浏览器中的实现可能存在差异。为了解决这些问题,我们可以采用以下策略: 1. **浏览器前缀...

    网页模板——javascript+css实现的离开网站时显示模态弹窗特效源码.zip

    "javascript+css实现的离开网站时显示模态弹窗特效源码"是一个这样的解决方案,它结合了JavaScript的事件监听和CSS的样式设计,为用户提供了一种动态且引人注目的体验。 JavaScript是网页交互的核心,它可以监听...

Global site tag (gtag.js) - Google Analytics