网站首页 > 文章精选 正文
1、文本内容修改
语法:
element.innerHTML = '<p>xxx</p>' //向一个元素中插入一段 HTML
element.innerText = 'xxx' //修改元素的显示文本内容
2、css样式修改
语法:
element.style.backgroundColor = "red";
修改多个样式:
// 思路:将多个样式写成对象的形式作为参数,传递给一个函数
var obox = document.getElementById("box");
// 函数封装
function setCss(ele, css) {
for (var key in css) {
ele.style[key] = css[key];
}
}
// 调用函数,传递参数
setCss(obox, {
width: "300px",
height: "300px",
backgroundColor: "red"
})
3、非表单元素的属性修改
所谓表单元素,就是可以放在form表单标签中存储用户输入的数据的标签,如 input、select标签,而非表单元素就是只能展示数据,不能存储用户输入的数据 的标签,如 a、img标签。
常用的非表单元素属性有 href、title、id、src、className,使用DOM对象操作属性,常用操作有 使用元素获取属性值,以及使用元素修改属性值。以下以a、img标签为例。
语法:
element.属性 = 'xxx';
需求:点击按钮修改a标签的地址和文本显示
var btn = document.getElementById("btn");
btn.onclick = function () {
var aObj = document.getElementById("ak");
//根据id获取超链接,设置href属性
aObj.href = "http://www.wolfcode.cn";
//根据id获取超链接,设置文字内容
aObj.innerText ="叩丁狼";
}
需求:点击按钮修改图片的title属性
<input type="button" value="显示效果" id="btn">
<img src="images/cangjingkong.jpg" alt="" title="嘎嘎">
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
var imgObjs = document.getElementsByTagName("img");
imgObjs[0].title = "哈哈";
}
</script>
为多个元素绑定事件(this)
需求:点击按钮设置多个p标签的文字内容
var btn = document.getElementById("btn");//获取id为btn的元素
btn.onclick = function () {
//根据标签名字获取标签
var pObjs = document.getElementsByTagName("p");
//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
console.log(pObjs);
//循环遍历这个数组
for(var i =0; i < pObjs.length; i++){
//每个p标签,设置文字
pObjs[i].innerText = "我们都是P标签";
}
};
需求:点击不同的按钮,p标签展示对应按钮的内容
var btn = document.getElementsByTagName("button");
var op = document.getElementsByTagName("p")[0];
// 获取到的按钮是一个数组,不能直接绑定事件
console.log(btn);
// 遍历这个数组 挨个绑定事件
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
// this指向是就是事件源
var text = this.innerText;
console.log(text);
op.innerText = '点击了' + text;
}
}
排他思想案例:点击当前按钮高亮显示,其他同级按钮取消高亮显示
var btn = document.getElementsByTagName("button");
for(var i=0;i<btn.length;i++){
btn[i].onclick = function(){
// 1.先处理所有元素,做初始化操作
for(var j = 0;j<btn.length;j++){
btn[j].style.background = "none";
}
// 2.再修改当前元素
this.style.background = "#cfc";
}
}
猜你喜欢
- 2025-01-20 「JavaScript 从入门到精通」18.WebApi介绍
- 2025-01-20 JavaScript技术:如何动态添加事件?
- 2025-01-20 JavaScript Window History
- 2025-01-20 从零开始学Vue!详解v-text、v-html、v-on、v-show、v-if
- 2025-01-20 JavaScript中常见的几种错误
- 2025-01-20 用好电脑浏览器的这些设置,不做别人免费的挖矿机
- 2025-01-20 刷新你的认知!12 个不为人知的 JavaScript 冷知识
- 2025-01-20 HTML 标签
- 2025-01-20 JavaScript中对话框的使用
- 2025-01-20 JavaScript 关闭浏览器 (不弹出提示框)
你 发表评论:
欢迎- 02-06京东首发叮咚Play!智能音箱第二场大战,屏幕或成兵家必争之重点
- 02-06救星来了?高通将大力支持智能音箱厂商
- 02-06WPS越用越卡慢 金山公司可有体验一下?
- 02-06联想小新犀利升级 16日电商节火热开售
- 02-06平板将迎来大变,紫光展锐做好“芯”准备
- 02-06高通的第二战场:汽车、5G、IoT一年卖30亿
- 02-06起底智能音箱行业:八大芯片厂商及其代表产品大盘点
- 02-06一文读懂智能音箱产业链
- 最近发表
- 标签列表
-
- react官网 (408)
- esd文件 (378)
- 更新目录 (379)
- 数据抓取 (373)
- pip换源 (412)
- display:none (369)
- img文件怎么打开 (475)
- a标签怎么去掉下划线 (376)
- git拉取代码 (435)
- 图片代码 (411)
- user-select (415)
- 访问github (415)
- 服务主机本地系统cpu占用高 (401)
- e.target (437)
- pycharm主题 (395)
- 火狐浏览器插件 (408)
- file.exists (413)
- js文件 (425)
- ip更换 (389)
- mssql和mysql区别 (366)
- 755权限 (389)
- requesttimeout (384)
- mysql默认密码 (398)
- pcm文件 (387)
- ipython和python区别 (387)
- 最新留言
-
本文暂时没有评论,来添加一个吧(●'◡'●)