首页 > JS专栏 > JS设置CSS样式的使用方法
2015
06-04

JS设置CSS样式的使用方法

今天在写一个弹窗广告的时候,因为要设置根据用户浏览器的大小来判断广告位置居中,但是不知道怎么使用JS来设置广告的边距宽,经过研究后发现原来很简单,如下:

var pagewidth = document.body.clientWidth; //获取页面宽度
var m_left = parseInt((pagewidth-1000)/2); //页面宽度减去广告宽度(我这里的广告宽度为1000px),然后除于2就是左边距
//如果左边距小于0,则设为0
if(m_left < 0){
	m_left = 0;
}
//使用js设置广告左边距
document.getElementById('ad_show').style.marginLeft = m_left + 'px';

下面是常用的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

留下一个回复