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

盒子标签和属性对照
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

时间： 2025-01-18 20:12:34

CSS和JS标签style属性对照表(方便js开发的朋友)_javascript技巧的相关文章

javascript-Javascript获取有CSS动画的标签的属性值

问题描述 Javascript获取有CSS动画的标签的属性值 //CSS中的动画: @keyframes move{ 0% {left:0px;} 100% {left:100px;} } //CSS样式: .move1{ width:100px; height:100px; animation:move 1000ms; -webkit-animation:move 1000ms } //div标签: div id="1" class="move1" 或者 .mov

js动态调用css属性的小规律及实例说明_javascript技巧

刚才看到一篇好的文章介绍js调用css属性,( ^_^ )不错嘛!免的自己忘记,总结一下 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.st

javascript通过获取html标签属性class实现多选项卡的方法_javascript技巧

本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生javascript通过获取html标签属性class实现多选项卡</title> <style type="text/css">

JS实现类似51job上的地区选择效果示例_javascript技巧

本文实例讲述了JS实现类似51job上的地区选择效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>地区选择效果</title></head> <meta http-equiv="Content-Type" content="text/html;

JS+CSS3实现超炫的散列画廊特效_javascript技巧

下面来介绍下我按照网上的视频讲解实现的照片墙效果图. 最终实现的效果包括如下: •当点击某张图片时,该图片移到中间区域并放大显示.当图片被点击时正反面切换显示. •某张图片被点击时,所有的图片的位置被随机重排 •某个控制按钮被点击时,对应的图片显示到正中间,控制按钮进行相应的样式切换.当连续点击某个控制按钮时,图片伴随着按钮的点击进行正反面切换对整个效果进行VCD分解,如下图: 按照计算机能理解的方式来分解案例. •View视觉 : HTML + css 基本界面模板 •Control

JS输入用户名自动显示邮箱后缀列表的方法_javascript技巧

本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)_javascript技巧

bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

利用CSS、JavaScript及Ajax实现高效的图片预加载_javascript技巧

方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码代码如下: #preload-01 { background: url(yun_qi_img/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(yun

js弹出层永远居中实现思路及代码_javascript技巧

弹出层窗口永远居中复制代码代码如下: <script type="text/javascript"> var isIE=window.XMLHttpRequest?false:true; var aIsIE={}; window.onload=function(){ if(isIE){ window.onscroll=doIE; window.onresize=doIE; } function doIE(){ aIsIE.top=document.documentEle