简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jquery DOM操作 - 属性及样式的获取与修改 2018-4-4
Blogger Information
Blog 17
fans 0
comment 0
visits 11988
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery DOM操作 - 属性及样式的获取与修改 2018-4-4
一片叶
Original
926 people have browsed it

DOM

<body>
<div class="box" data-bai="这里是一个盒子">
<p class="blue width" id="lgbd" onclick="dianji()" title="这里是一段文字" >这里是一段文字</p>
<p class="red" id="aaa" onclick="dianji2()" title="第二段文字">第二段文字</p>
<p class="zdy border " title="删除类名" onclick="dianji3()" >添加删除类名</p>
</div>

css

.box{
position: relative;
top: 20px;
}
.blue{
color: lightblue;
}
.font{
color: red;
}
.border{
box-shadow: 1px 1px 1px black;
}
p{
border: 1px solid black;
}
.width{
width: 30px;
}
.green{
color: lawngreen;
}

javascript

 // 通过标签选择器选择p标签,通过.attr方法,获得p标签的title的属性值
function dianji(){
// $("p").attr("title");
// 修改title属性值
$(".blue").attr("title","这里不是一段文字");
// 设置title的值为一个回调函数
$(".blue").attr("title",function(){return this.value;});
// 访问自定义属性
$(".box").attr("data-bai");
// 删除title id属性
$(".blue").removeAttr("title id data-bai");
// 添加一个类名
$(".blue").addClass("font");
// 添加多个类名
$(".blue").addClass("border green");
// 删除类名
$(".blue").removeClass("width");
}
function dianji2(){
// prop只能读取固有属性.如果要读取自定义属性,需要另行操作
// 如果要删除固有属性,只能将固有属性值设置为false;
$(".red").prop("title","啦啦啦");
$(".red").prop("id", false);
// removeProp,不能删除固有属性,一旦删除,则不能恢复
}
function dianji3(){
// 设置一个css样式
$(".zdy").css("width","100px");
// 设置多个css样式
$(".zdy").css({"height":200,"border":"1px solid yellow"});
// 获得符合条件的第一个元素内容的高度,宽度值,加入参数,则是设置所有符合条件的元素的内容的宽高值
console.log($(".zdy").height());
console.log($(".zdy").width());
// offset()获得元素的偏移量,有两个值top left.指定时单独获得
console.log($(".zdy").offset()); //同时获得
console.log($(".zdy").offset().left);
console.log($(".zdy").offset().top);
// position(),获取元素相对于最近的一个position为relitive或absolute的父节点的相对偏移量
// 有两个值,top left
console.log($(".zdy").position());
}

2018-04-08_13-25-26.png

MindManager_2018-04-08_13-25-49.png

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！