收藏
批改状态：未批改
老师批语：
Jquery 中
1、attr()和css()方法的完整用法
根据参数数量确定要执行的操作,第一个参数是读取，第二个参数是设置新值
功能相当于读到或设置当前元素的style属性的值,其实就是内联样式
2、属性与自定义属性操作:attr()和removeAttr()的完整用法
具体实例如下：
实例
<html>
<head>
<meta charset="utf-8" />
<title>jquery attr()和css()方法使用</title>
<style>
.box1{
width:300px;
height:300px;
background-color:#CCC;
position:relative;
}
.box2{
width:100px;
height:100px;
background-color:#3FC;
position:absolute;
top:50px;
right:50px;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<img src="gyy.jpg" width="200" id="img" alt="高圆圆" title="明星">
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<script>
//1、 attr():元素属性的获取与设置
//单个参数为获取当前属性的值
var res=$('#img').attr('src')
//双参数为，第一个是属性，第二个是设置的值
$('#img').attr('width','100px')
$('#img').attr('style', 'border-radius: 50%;box-shadow:5px 5px 5px #ccc')
//2、删除属性
var res=$('#img').removeAttr('alt')
//3、设置样式 css(name,value)
var res = $('#img').css('width',200)
var res = $('#img').css('order-radius', '30%')
//4、读取样式 css(name),返回的都是字符串类型 200px
var res = $('#img').css('width')
//一、获取图片的宽高属性
var resWidth=$('#img').width()
var resHeight=$('#img').height()
//二、设置图片的宽高属性
var resWidth=$('#img').width(300)
var resHeight=$('#img').height(300)
//console.log(resWidth)
//console.log(resHeight)
//三、获取图片的位置
var res= $('#img').offset()
//四、获取绝对定位元素的相对偏移量
var res=$('.box2').position().left;
var res=$('#img').position().top;
console.log(res)
</script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
