jquery的css()对组合的属性无法获取(background,font,margin,padding)(ie6、7)

原创 2012年08月20日 16:01:25
<!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>jquery的background获取问题</title>
<style type="text/css">
	.demo {
		font:12px/24px Verdana, Geneva, sans-serif;
		background:#F00;
		width:200px;
		height:200px;
		margin:10px;
		/*margin:10px 20px;	//取消此注释,将导致js错误*/
	}
	.show {
		border:solid 1px #000;
	}
</style>
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script>
<script type="text/javascript">
	$(function() {
		var html = '';
		var bg = $('.demo').css('background');
		html += 'background :' + bg + '<br />';
		var bgC = $('.demo').css('backgroundColor');
		html += 'background-color :' + bgC + '<br />';
		var font = $('.demo').css('font');
		html += 'font :' + font + '<br />';
		var fontS = $('.demo').css('fontSize');
		html += 'font-size :' + fontS + '<br />';
		var margin = $('.demo').css('margin');
		html += 'margin :' + margin + '<br />';
		var marginT = $('.demo').css('marginTop');
		html += 'margin-top :' + marginT + '<br />';
		
		$('.show').html(html);
	})
</script>
</head>

<body>
<div class="demo">哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<div class="show"></div>
</body>
</html>


ie下

background :undefined
background-color :#f00
font :undefined
font-size :12px
margin :10px
margin-top :10px


chrome下

background :rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
background-color :rgb(255, 0, 0)
font :normal normal normal 12px/24px Verdana, Geneva, sans-serif
font-size :12px
margin :10px
margin-top :10px


CSS属性总结(二):text, font, margin, padding

文本 color 设置元素内文本的颜色。值可以取任意CSS支持的颜色值,包括颜色名称(如red, blue)、十六进制颜色值(如#ff0000)或者rgb颜色值(如rgb(255, 0, 0))。...
  • sadfishsc
  • sadfishsc
  • 2011年12月05日 15:24
  • 6443

CSS中IE6、7和火狐对margin、padding的兼容性解析

1、IE与Fire Fox识别CSS属性区别标签 !important #page_body{ width: 1000px !important; height:30px !important;...
  • zhangxiangyu0731
  • zhangxiangyu0731
  • 2012年11月23日 09:15
  • 2117

css中的 margin | padding | border 属性图释

这篇文章是转载的,对于理解css中的margin/padding/border这些概念很有帮助CSS 中有个重要的概念,就是盒子模式 (Box model)。胡戈的"一个馒头引发的血案"中有个圆圈套圆...
  • faintling
  • faintling
  • 2007年11月11日 17:40
  • 5089

【CSS】padding,border,margin与width宽度的关系

padding,border,margin这三样东西不算难,算是在CSS中老生常谈的东西,但是要注意其对width的影响, 直接上一段极其简单的代码: margin_...
  • yongh701
  • yongh701
  • 2015年09月23日 17:23
  • 9361

CSS中IE和火狐对margin、padding的兼容性解析

1、IE与Fire Fox识别CSS属性区别标签 !important #page_body{ width: 1000px !important; height:30px !important;...
  • m0_37836194
  • m0_37836194
  • 2017年08月10日 12:02
  • 126

内联元素的padding,margin,border等不起作用的原因

内联元素的padding,margin,border等不起作用的原因
  • bufushudexiaobai
  • bufushudexiaobai
  • 2016年10月15日 12:54
  • 1229

CSS Margin(外边距)和Padding(填充)

一、CSS Margin(外边距) 1、Margin   margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的。margin可以单独改变元素的上,下,左,右边距。也可以一...
  • qq_27626333
  • qq_27626333
  • 2016年06月20日 14:41
  • 2042

inline行内元素与padding margin 的断舍离

inline 行内元素 padding margin -top bottom line-height
  • qq_35809245
  • qq_35809245
  • 2016年12月14日 16:10
  • 1194

CSS深入之其实你可能根本不认识margin和padding(一)

1.我们来解析官方的margin是怎么个说法margin属性可以为给定元素设置所有四个(上下左右)方向的外边距属性。四个外边距属性设置分别是: margin-top, margin-right, ma...
  • qq_18661257
  • qq_18661257
  • 2017年04月17日 08:55
  • 984

CSS利用padding和margin正负相消实现多列等高

原文链接:http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html CSS布局奇淫技巧之-多列等高 什么是等高布局? 先来看一个案例...
  • u010874036
  • u010874036
  • 2016年04月06日 21:13
  • 2089
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery的css()对组合的属性无法获取(background,font,margin,padding)(ie6、7)
举报原因:
原因补充:

(最多只允许输入30个字)