jQuery中自定义属性和样式的操作用到如下方法
arrt()和内联样式css()
arrt()有getter和setter
只输入1个参数时为getter，输入两个参数时为setter
既可以获取原生样式，又可以获取自定义样式
通过对标签添加style属性的方式改变元素样式
arrt()用法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素属性和自定义属性的操作 attr()</title>
</head>
<body>
<img src="../images/4.jpg" alt="美女" title="眼镜美女" width="100" data-area="山东">
</body>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var test = $('img').attr('alt')
$('img').attr('style','border-radius:50%')
// var test = $('img').attr('data-area')
var test = $('img').attr('width')
$('img').attr('width',function(){return 100+50})
console.log(test)
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
css()用法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中内联样式css()的用法</title>
<style type="text/css">
.box {
width: 300px;
}
.box ul {
overflow: hidden;
}
.box ul li {
float:left;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('ul').css('list-style','none')
$('ul>li*').css('margin','10px')
$('.box').css('width','600px')
// $('ul').css('width','100%').css('height','100%')
$('li').css('width','30px').css('line-height','30px')
$('li').css({
'border-radius':'50%',
'border':'1px solid gray',
'text-align':'center',
// 'line-height':'100%',
'text':'0.4em',
'background-color':'orange'
})
var test = $('li').width()
var test = $('li').height()
var test = $('ul').offset()
var test = $('ul').position()
console.log(test)
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
css()用法手抄
