jq获取元素的4个padding值padding值可以这样获取:$('id').css('padding-top') $('id').css('padding-right') $('id').css('padding-bottom') $('id').css(&#3

jq获取元素的4个padding值

padding值可以这样获取:

$("id").css('padding-top')
$("id").css('padding-right')
$("id").css('padding-bottom')
$("id").css('padding-left')

这样得到的是字符串,比如 10px
如果要的到数字,可以使用parseInt,例如

parseInt($("id").css('padding-top'))

padding值可以这样设置:

$("id").css('padding-top','80px')
$("id").css('padding-right','80px')
$("id").css('padding-bottom','80px')
$("id").css('padding-left','80px')

其他属性照搬即可 

示例代码如下:

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<div id="keleyidiv" style="background-color:silver;width:200px;padding:20px 10px 15px 30px;border:1px solid green;"></div>
<span id="keleyiresult"></span>
<script>
$(document).ready(function () {
var $keleyidiv = $('#keleyidiv');
$("#kele"+"yiresult").text( $keleyidiv.css('padding-top') + ' ' + $keleyidiv.css('padding-right') + ' ' 
+ $keleyidiv.css('padding-bottom') + ' ' + $keleyidiv.css('padding-left'));
})
</script>

 

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


颜色和背景标签和属性对照
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动态创建script/link/style标签

下一篇:常用JS代码三

评论列表
发表评论
称呼
邮箱
网址
验证码(*)
热评文章
相关阅读