js和css

最新推荐文章于 2024-03-05 19:50:41 发布

baitiandeye

最新推荐文章于 2024-03-05 19:50:41 发布

阅读量617

点赞数

分类专栏： javascript 文章标签： javascript stylesheet css whitespace border html

本文链接：https://blog.csdn.net/baitiandeye/article/details/5857181

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.css和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

补充:

在建设网站的过程中，有时难免会要用js来控制css,其实这是十分简单的看下面的例子。
html:<div id="my_div" style="background-color:red">js控制css</div>

js:document.getElementById("my_div").style.backgroundColor="red"

其实就是用style对象访问css属性，值得注意的是样式属性的写法在css里是background-color,但是在js里就是backgroundColor,一般情况是把"_"去掉，第二个字母用大写。

如果用的是外联样式表，就用currentStyle对象代替style对象。如：

document.getElementById("my_div").currentStyle.backgroundColor="red"

一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试了</title>

</head>
<body>
<div>
<div id="demo" style="border: dashed 1px #000000;" οnmοusemοve="divFloatRight(this);"
οnclick="divFloatLeft(this);">
JavaScript控制div的float属性，onmousemove~float:right,onclick~float:left。
</div>
</div>
</body>
</html>

2.如果通过js修改整体外部css也是可以的
document的styleSheets属性可以返回一个StyleSheetList样式数组。该数组中的元素为嵌入或链入文档的所有样式表的对象即<link>和<style>的个数
然后再调用rules调用每个样式表的每个样式最后在修改属性
例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<link href="style.css" rel="stylesheet" type="text/css" />

<TITLE> New Document </TITLE>
<script>
window.οnlοad=fnInit;
function fnInit(){
// 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];//调用具体样式对象的一个具体样式
oRule.style.backgroundColor="#0000FF";
}
</script>
</HEAD>

</BODY>
</HTML>

baitiandeye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js和css

<br />1.css和JavaScript属性对比<br />CSS语法 (不区分大小写) JavaScript语法 (区分大小写) <br />border border <br />border-bottom borderBottom <br />border-bottom-color borderBottomColor <br />border-bottom-style borderBottomStyle <br />border-bottom-width borderBottomWi
复制链接

扫一扫

专栏目录