`
xumingrencai
  • 浏览: 1181029 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多
<!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


分享到:
评论

相关推荐

    jQuery详细教程

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...

    jquery插件使用方法大全

    jQuery 1.1.3(2007年7月):这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。 jQuery 1.2(2007年9月):...

    相位角.html css+div生成相位角

    css+div生成相位角 三项电流相位角 &lt;script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"&gt; *{padding: 0;margin: 0 auto;} .allContent { margin-top: 200px; width: 300px; height: ...

    jQuery实现的简单歌词滚动功能示例

    本文实例讲述了jQuery实现的简单歌词滚动功能。分享给大家供大家参考,具体如下: jquery实现歌词滚动 1.css  /* CSS Document */ * { margin: 0; padding: 0; font-size: 12px; } body { background: none; }...

    jQuery+css实现的切换图片功能代码

    本文实例讲述了jQuery+css实现的切换图片功能代码。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;demo&lt;/title&gt; ...

    jQuery+CSS实现的标签页效果示例【测试可用】

    本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考,具体如下: CSS代码: #tabs{ width:600px; height:250px; background:white; margin:20px; } #tabs ul{ float:left; margin:20px 0 0 20...

    jquery 图片自动切换

    *{ margin:0; padding:0; border:0; list-style:none} img{ display:block; border:0} body{ padding:50px;} .switch{ width:320px; height:280px; border:1px #CCCCCC solid; padding:3px;} .switch .pic_box{width...

    jQuery的砸金蛋抽奖代码.zip

    style type="text/css"&gt; .egg { width: 750px; height: 500px; margin: 50px auto 20px auto; background: url(images/bg.jpg); position: relative; } .egg ul li { z-index: 999; } .eggList ...

    jQuery+css实现的换页标签栏效果

    本文实例讲述了jQuery+css实现的换页标签栏效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;index&lt;/title&gt; ...

    三星9305收索

    margin:7px 6px 9px 0;vertical-align:middle}.bdsug .bdsug-direct p span{margin-left:8px}.bdsug .bdsug-direct p i{font-size:12px;line-height:100%;font-style:normal;font-weight:normal;color:#fff;...

    全屏幻灯片JQ+JS+CSS3

    &lt;script type='text/javascript' src='http://www.ic678.com/taobao/js/jquery-1.7.2.min.js'&gt; img{border:0} #slideshow{position: relative;height: 300px;width: 930px;margin: 0 auto;} #slideshow a{float: ...

    jQuery动态加载css文件实现方法

    有时我们可能会需要使用 jQuery 来加载一个外部的 css 文件,如在切换页面布局时。思路是创建一个 link 元素,并将它添加到 标记中即可,下边首先看看怎么使用 jQuery 来实现。 下边是我喜欢的写法: $("&lt;link&...

    jquery 联动输入插件

    padding: 7px 6px; line-height: 18px; height: 18px; } .j_prompt_select .select { background-color: #e8f4ff; } .j_prompt_select ul li .last { float: right; } .j_prompt_select ul li .first ...

    jquery 仿QQ相册

    &lt;style type="text/css"&gt; * {line-height: 150%} .image {text-align: center; line-height: 590px; margin: 30px auto 0px; width: 850px; height: 620px} .image img { overflow:hidden} img {border:0px} #photo_...

    非常精美的h5 进度条

    &lt;link rel="stylesheet" type="text/css" href="css/jquery.classycountdown.css" /&gt; .ClassyCountdownDemo { margin:0 auto 30px auto; max-width:800px; width:calc(100%); padding:30px; display:block } #...

    jQuery折叠菜单

    jQuery折叠菜单,自适应浏览器高度 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;title&gt; NarBar table ; charset=gb2312" ...

    jquery实现吸顶导航效果

    本文实例为大家分享了jquery实现吸顶导航效果的具体代码,供大家参考,具体内容如下 css: *{margin:0;padding:0;} body{ margin:0 auto; max-width:10rem; } header{ width:10rem; height:1rem; ...

    jQuery事件绑定用法详解

    本文实例讲述了jQuery事件绑定。分享给大家供大家参考,具体如下: style.css *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #...

    jQuery 弹窗对话框拖动 非插件

    jQuery 弹窗 对话框 拖动 非插件 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; ; charset=utf-8" /&gt; 资源网 ...

Global site tag (gtag.js) - Google Analytics