jquery框架：CSS操作_$("h1").css-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/97046002

本文介绍了使用CSS和jQuery进行网页元素样式的设置与获取、元素位置与尺寸的控制等基本操作。通过实例展示了如何设置元素背景颜色、获取元素背景颜色、获取元素的绝对与相对位置、以及获取元素的高度、宽度等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS操作:

1.css

css();

css方法

<body>
	<h1>00001</h1>
	<h1>00002</h1>
	<h1>00003</h1>
	<h1>00004</h1>
	<h1>00005</h1>		
</body>

	
<script>
$('h1').css({'background':'#00f','color':'#fff'});
</script>

css获取样式

$('h1').css({'background':'#00f','color':'#fff'});
$('h1').click(function(){
	str=$(this).css('background');
	alert(str);
})

2.位置

offset();
position();
scrollTop();
scrollLeft();

offset获取绝对定位坐标

.mydiv{
			position: absolute;
			left:300px;
			top:200px;
			background: #888;
		}
	
</style>
<script src="/js/jquery.min1.js">
	
</script>

</head>
<body>
	<div class="mydiv">123</div>
</body>	
<script>
$('.mydiv').click(function(){
	x=$(this).offset().left;
	y=$(this).offset().top;
	alert(x+'-'+y);
})
</script>

回到顶部特效（未实现）

#top{
			cursor: pointer;
			position: fixed;
			right:15px;
			bottom:15px;
			display: none;
		}
	
</style>
<script src="/js/jquery.min1.js">
	
</script>

</head>
<body>
	<h1>0000001</h1>
	<h1>0000002</h1>
	<h1>0000003</h1>
	<h1>0000004</h1>
	<h1>0000005</h1>
	<h1>0000006</h1>
	<h1>0000007</h1>
	<h1>0000008</h1>
	<h1>0000009</h1>
	<h1>0000010</h1>
	<h1>0000011</h1>
	<h1>0000012</h1>
	<h1>0000013</h1>
	<h1>0000014</h1>
	<h1>0000015</h1>
	<h1>0000016</h1>
	<h1>0000017</h1>
	<h1>0000018</h1>
	<h1>0000019</h1>
	<h1>0000020</h1>
	<h1>0000021</h1>
	<h1>0000022</h1>
	<h1>0000023</h1>
	<h1>0000024</h1>
	<h1>0000025</h1>
	<h1>0000026</h1>
	<h1>0000027</h1>
	<h1>0000028</h1>
	<h1>0000029</h1>
	<h1>0000030</h1>
	<h1>0000031</h1>
	<h1>0000032</h1>
	<h1>0000033</h1>
	<h1>0000034</h1>
	<h1>0000035</h1>
	<h1>0000036</h1>
	<h1>0000037</h1>
	<h1>0000038</h1>
	<h1>0000039</h1>
	<h1>0000040</h1>
	<h1>0000041</h1>
	<h1>0000042</h1>
	<h1>0000043</h1>
	<h1>0000044</h1>
	<h1>0000045</h1>
	<h1>0000046</h1>
	<h1>0000047</h1>
	<h1>0000048</h1>
	<h1>0000049</h1>
	<h1>0000050</h1>
	<h1>0000051</h1>
	<h1>0000052</h1>
	<h1>0000053</h1>
	<h1>0000054</h1>
	<h1>0000055</h1>
	<h1>0000056</h1>
	<h1>0000057</h1>
	<h1>0000058</h1>
	<h1>0000059</h1>
	<h1>0000060</h1>
	<h1>0000061</h1>
	<h1>0000062</h1>
	<h1>0000063</h1>
	<h1>0000064</h1>
	<h1>0000065</h1>
	<h1>0000066</h1>
	<h1>0000067</h1>
	<h1>0000068</h1>
	<h1>0000069</h1>
	<h1>0000070</h1>
	<h1>0000071</h1>
	<h1>0000072</h1>
	<h1>0000073</h1>
	<h1>0000074</h1>
	<h1>0000075</h1>
	<h1>0000076</h1>
	<h1>0000077</h1>
	<h1>0000078</h1>
	<h1>0000079</h1>
	<h1>0000080</h1>
	<h1>0000081</h1>
	<h1>0000082</h1>
	<h1>0000083</h1>
	<h1>0000084</h1>
	<h1>0000085</h1>
	<h1>0000086</h1>
	<h1>0000087</h1>
	<h1>0000088</h1>
	<h1>0000089</h1>
	<h1>0000090</h1>
	<h1>0000091</h1>
	<h1>0000092</h1>
	<h1>0000093</h1>
	<h1>0000094</h1>
	<h1>0000095</h1>
	<h1>0000096</h1>
	<h1>0000097</h1>
	<h1>0000098</h1>
	<h1>0000099</h1>
	<h1>0000100</h1>
	<img src="/img/top.png" id='top'>
</body>	
<script>
// topobj=document.getElementById('top');

// window.onscroll=function(){
// 	st=document.body.scrollTop;
// 	document.title=st;
// 	if(st>=300){
// 		topobj.style.display='inline';
// 	}else{
// 		topobj.style.display='none';
// 	}
// }

// topobj.onclick=function(){
// 	document.body.scrollTop=0;
// }
$(window).scroll(function(){
	x=$(window).scrollTop();
	document,title=x;
})
</script>

position获取相对父元素的坐标

	.div1{
			width:500px;
			height:300px;
			margin-left:200px;
			position: relative;
			top:0px;
			left:0px;
			background: #f0f;
		}

		.div2{
			width:100px;
			height:100px;
			background: #272822;
			position: absolute;
			left:150px;
			top:100px;
		}
	
</style>
<script src="/js/jquery.min1.js">
	
</script>

</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>	
<script>
$('.div2').click(function(){
	x=$(this).position().left;
	y=$(this).position().top;

	alert(x+'-'+y);
});
</script>

3.尺寸

height();
width();
innerHeight();
innerWidth();
outerHeight();
outerWidth();

width和height方法

<body>
	<img src="/img/cai.png" alt="">	
</body>	
<script>
$('img').click(function(){
	x=$(this).width();
	y=$(this).height();
	alert(x+'-'+y);
})
</script>

innerWidth和innerHeight获取padding在内的大小

	.mydiv{
			width:300px;
			height:300px;
			background: #272822;
			padding:5px;
		}
	
</style>
<script src="/js/jquery.min1.js">
	
</script>

</head>
<body>
	<div class="mydiv"></div>
</body>	
<script>
$('.mydiv').click(function(){
	x=$(this).innerWidth();
	y=$(this).innerHeight();
	alert(x+'-'+y);
})
</script>

outerWidth和outerHeight获取border在内的大小

	.mydiv{
			width:300px;
			height:300px;
			background: #272822;
			padding:5px;
			border:5px solid #00f;
		}
	
</style>
<script src="/js/jquery.min1.js">
	
</script>

</head>
<body>
	<div class="mydiv"></div>
</body>	
<script>
$('.mydiv').click(function(){
	x=$(this).outerWidth();
	y=$(this).outerHeight();
	alert(x+'-'+y);
})
</script>