JQ attr实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4月4日作业</title>
</head>
<body>
<img src="images/xmy.jpg" height="800" id="xmy" alt="高楼" title="小蛮腰" data-title="中国广州">
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 获取固有属性
var res = $('img').attr('title')
// 设置固有属性
$('#xmy').attr('height','600')
$('#xmy').attr('style','border-radius:2%;box-shadow:10px 10px 10px #888')
$('#xmy').attr('height',function(){return 120+30})
// 设置自定义属性
var title = $('img').attr('data-title')
$('#xmy').removeAttr('style')
console.log(title)
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4月4日作业</title>
</head>
<body>
<img src="images/1.jpg" alt="freeze" title="高楼">
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var attr=$('img').css('width',200)
var attr=$('img').css('border-radius','20%')
var attr=$('img').css('box-shadow','3px 3px 3px #66997B')
// 合并写法
var attr=$('img').css({
'width':'200',
'border-radius':'20%',
'box-shadow':'3px 3px 3px #66997B'
})
var res=$('img').css('box-shadow')
// 宽，高
var attr=$('img').width(300)
var attr=$('img').width()
var attr=$('img').height(300)
var attr=$('img').height()
var res=$('img').offset()
// left,top 属性
var res=$('img').offset().left
var res=$('img').offset().top
// 绝对定位
var res=$('img').position().left
var res=$('img').position().top
var res=$('img').scrollLeft()
var res=$('img').scrollTop()
console.log(res)
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
attr css 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4月4日作业</title>
</head>
<body>
<img src="images/1.jpg" alt="freeze" title="高楼">
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var attr=$('img').css('width',200)
var attr=$('img').css('border-radius','20%')
var attr=$('img').css('box-shadow','3px 3px 3px #66997B')
// 合并写法
var attr=$('img').css({
'width':'200',
'border-radius':'20%',
'box-shadow':'3px 3px 3px #66997B'
})
var res=$('img').css('box-shadow')
// 宽，高
var attr=$('img').width(300)
var attr=$('img').width()
var attr=$('img').height(300)
var attr=$('img').height()
var res=$('img').offset()
// left,top 属性
var res=$('img').offset().left
var res=$('img').offset().top
// 绝对定位
var res=$('img').position().left
var res=$('img').position().top
var res=$('img').scrollLeft()
var res=$('img').scrollTop()
console.log(res)
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
