• 技术文章 >web前端 >前端问答

    jquery操作元素样式的方法有哪些

    青灯夜游青灯夜游2022-05-11 20:17:24原创302

    操作样式的方法有:1、css(),可设置元素的样式属性;2、height(),可设置元素的高度;3、width(),可设置元素的宽度;4、attr(),可通过控制元素的id、class、style属性来操作样式;5、addClass()等。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    jquery直接操作元素样式的方法

    CSS 属性描述
    css()设置或返回匹配元素的样式属性。
    height()设置或返回匹配元素的高度。
    offset()返回第一个匹配元素相对于文档的位置。
    position()返回第一个匹配元素相对于父元素的位置。
    scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。
    scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。
    width()设置或返回匹配元素的宽度。

    1、css()

    返回 CSS 属性值语法:

    $(selector).css(name)

    设置 CSS 属性语法:

    $(selector).css(name,value)

    2、height()

    返回高度的语法:

    $(selector).height()

    设置高度的语法:

    $(selector).height(length)

    3、width()

    返回宽度的语法:

    $(selector).width()

    设置宽度的语法:

    $(selector).width(length)

    示例:操作元素样式--修改元素宽度

    1、使用width()方法

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("button").click(function() {
    					$("img").width("200px");
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<img src="1.jpg" width="150"/><br>
    		<button>修改元素的宽度</button>
    	</body>
    </html>

    1.gif

    2、使用css()方法

    $(document).ready(function() {
    	$("button").click(function() {
    	 $("img").css("width","250px");
    	});
    });

    2.gif

    jquery间接操作元素样式的方法

    在jquery中,可以通过操作元素属性来间接操作元素样式。

    方法描述
    addClass()向匹配的元素添加指定的类名。
    attr()设置或返回匹配元素的属性和值。
    prop()设置或返回被选元素的属性/值
    removeAttr()从所有匹配的元素中移除指定的属性。
    removeClass()从所有匹配的元素中删除全部或者指定的类。
    toggleClass()从匹配的元素中添加或删除一个类。

    示例:使用attr()添加样式

    当使用attr() 方法设置元素的style属性,即可给元素添加css样式。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("button").click(function() {
    					// $("div").attr({"style":"border: 5px solid paleturquoise;"});
    					$("div").attr("style", "border: 5px solid paleturquoise;width: 200px;");
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<div>hello</div>
    		<br>
    		<button>给div元素添加css样式</button>
    
    	</body>
    </html>

    2.gif

    【推荐学习:jQuery视频教程web前端入门视频

    以上就是jquery操作元素样式的方法有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery怎么将父级元素隐藏 下一篇:jquery中datagrid怎么去掉滚动条
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• jquery中closest方法怎么用• jquery普通版本与min版本有什么区别• jquery中设置点击事件的方法是哪个• jquery怎么从dom删除所有匹配的元素• jquery中each是什么意思• jquery选择器以什么开头
    1/1

    PHP中文网