整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
s插件jquery可以很方便的对HTML的元素进行操作，比如一些元素的显示与隐藏，一些元素的动态效果等，今天就说一说通过jquery获取DIV元素的CSS属性，以及设置DIV元素的CSS属性的方法。
jq获取DIV元素的属性值，可以使用css()方法
例：利用jquery获取DIV元素的宽
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#mochu{
margin: 10px;
padding: 10px;
color: red;
height: 30px;
width: 40px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
var h = $('#mochu').css('width');
console.log(h);
</script>
</body>
</html>
打印结果：
40px
例：利用jquery获取DIV元素的高
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
var h = $('#mochu').css('height');
console.log(h);
</script>
</body>
</html>
打印结果：
42px
注意：
1、如果给DIV元素定义了CSS属性的值，则直接输出定义的CSS值
2、如果未定义DIV元素的CSS属性值，则输出浏览器渲染后DIV的默认值
在JQ中可以通过CSS方法获取DIV元素的CSS属性值，也可以设置或改变元素的CSS属性值
例：利用jq改变字体的颜色
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
$('#mochu').css('color','red');
</script>
</body>
</html>
结果如图：
注：改变DIV中字体的颜色其实就是给这个DIV加入了一个 color 的CSS属性，并把属性值设置成 red（红色）
在浏览器中查看元素就可以发现加入的CSS属性
例：给DIV元素加入多个CSS属性
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
$('#mochu').css({'color':'red','heigth':'40px','width':'40px'});
</script>
</body>
</html>
在浏览器中审核元素，如下图
可以发现，对过JQ设置的CSS属性都写到了DIV上
注意：利用JQ的CSS()方法设置或添加多个CSS属性的时候，要以{'':'','':''}这种数据格式写入。
开发过程中，jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然后我们有时候确需要，找遍jQuery api文档也没有任何方法可以拿到。
看到有的人通过parent().html()，如果当前元素没有兄弟元素还行，如果有那就行不通了。后台实验发现有一个jQuery的一个方法可以解决，而且非常简便，如下：
jQuery.prop("outerHTML");
<div class="test"><p>hello，你好！</p></div>
<script>$(".test").prop("outerHTML");</script>输出结果为：<div class="test"><P>hello,你好！</p></div>
因为原生JS DOM里有一个内置属性 outerHTML （看清大小写哦，JS是区分大小写的）用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop()能拿到，经过实验attr()方法是拿不到的，不信的话，大家也可以尝试尝试，谢谢。
当然也有人用jQuery的 clone() 函数配合append() 来创建一个只有一个子元素的节点，然后来拿节点的html，这样也是可行的，但是代码繁琐。
ndex.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>模态窗口</title>
</head>
<body>
<script>
//alert(1);
function pop(){
//传递参数到模态窗口
var obj=new Object();
obj.name="Hello World---来自父窗口";
var returnStr = window.showModalDialog("model.html",obj,
"dialogHeight=200px;dialogTop=200px;dialogLeft=200px;");
alert("模态窗口返回参数"+returnStr);
//刷新页面
window.location.reload();
}
</script>
<button onClick="pop()">打开模态窗口</button>
<p>模态窗口传参数，并获取返回值</p>
</body>
</html>
model.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<script>
// 接受父窗口的参数
var obj=window.dialogArguments;
alert(obj.name);
// 返回参数到父窗口
window.returnValue=’Hello World---来自模态窗口’;
</script>
模态窗口
</body>
</html>
如果直接在浏览器中无法正常运行，那么就将其放在服务器容器中。
*请认真填写需求信息，我们会在24小时内与您取得联系。
