实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()使用方法作业</title>
</head>
<body>
<img src="http://www.php.cn/tpl/Index/Static/img/banner7.jpg" width="770" height="300" alt="PHP中文网banner" title="PHP学习路径" id="images" data-ad="广告">
<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('alt')
var res = $('img').attr('title')
var res = $('img').attr('data-ad')
var res = $('img').attr('title','2018新版PHP中文网学习路径')
$('#images').attr('style', 'border-radius: 50%;box-shadow:2px 2px 2px #e9e9e9')
var res = $('img').attr('width',function(){return 777})
var res = $('img').removeAttr('title alt data-ad')
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css()使用方法作业</title>
<style type="text/css">
.box1{
width: 500px;
height:500px;
background-color: #000;
position: relative;
}
.box2{
width: 200px;height: 200px;
background-color: #f00;
position: absolute;
top:50px;
left: 20px;
}
</style>
</head>
<body style="margin:0 auto">
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var res = $('.box1').css({
'width':200,'height':200,'border-radius':'4%'
})
var res = $('.box2').css({
'width':500,'height':500,'border-radius':'4%'
})
var res = $('.box1').offset().width
var res = $('.box2').offset().width
var res = $('.box1').position()
var res = $('.box2').position().top
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
