PHP课程第十四天 JQuery attr()和css()方法的完整用法

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>
运行实例 »
点击 "运行实例" 按钮查看在线实例

相关文章