图片样式为“金属圆角矩形”,艺术效果为“线条图”,图片效果为“棱台”中的“艺术装饰” 这个怎么操作
904
2022-05-29
一个元素可以修改它的内容、属性和样式。
目录
一、DOM修改元素
1. 修改属性
2. 修改样式
二、添加/删除元素
1. 添加一个新元素
2. 优化
3. 删除元素
一、DOM修改元素
1. 修改属性
(1)字符串类型的 HTML 标准属性(上篇)
(2)bool 类型的 HTML 标准属性(上篇)
(3)自定义扩展属性
HTML 标准中没有规定,程序员根据自身的需要自发添加的属性就是自定义属性。
a:自定义属性经常用于代替 id、class 或元素选择器,作为查找触发事件的元素的条件;CSS 的各种选择器均有不足之处:
i. id 选择器,只能选1个;
ii. class 选择器,本职工作是定义样式,而样式的修改极其频繁!如果用class选择器查找元素绑定事件,一旦样式类发生变化,程序必然出错;
iii. 元素选择器,因为实现同一种效果,可选的标签名优很多,没有统一规定。如果用元素选择器查找触发事件的元素,绑定事件,则元素一改,功能又立刻出错。
为了解决以上问题,就可以为元素添加自定义属性,当查找触发事件的元素时,用属性选择器[自定义属性]来查找即可。
b:在 js 中访问自定义扩展属性
要注意自定义属性不能用 . 访问,因为自定义属性是后天程序员自发添加的,在 HTML 标准中没有规定。所有在内存中的元素对象上,不包含自定义扩展属性!可以用旧核心DOM:
元素.getAttribute("自定义属性名")
元素.setAttribute("自定义属性名", "属性值")
在新版的HTML5标准中,有新的规定:
① HTML 中,所有自定义属性名必须以 data- 开头:<元素 data-自定义属性名="属性值">
② 如果在 html 中以 data- 开头了,则 js 中: 元素.dataset.自定义属性名。
举例:点击按钮,记录次数;
2. 修改样式
(1)修改内联样式
格式:元素.style.css属性="属性值"
由于有些 css 属性名中带-,这样会和减法的 - 号冲突;所以所有带 - 的 css 属性名必须去掉 - 变驼峰命名,比如:font-size -> fontSize、background-color -> backgroundColor、list-style-type -> listStyeType。
(2)获取样式
使用元素 .style.css 属性的方式,只能获取内联样式,无法获得内部或外部样式表中层叠或继承来的 css 属性值。所以今后要想获得元素任意 css 属性值,都要获得计算后的样式。计算后的样式就是最终应用到一个元素上的所有 css 属性的总和。获取方法分为两步:
i. 先获得计算后的样式对象:var style=getComputedStyle(元素对象);
ii. 从完整的样式对象中只提取个别css属性:style.css属性;
举例:获取 h1 元素计算后的样式;
Welcome to my web site
在实际的项目中,很多效果都需要批量修改一个元素的多个 css 属性,而 .style 一句话只能修改一个 css 属性,如果修改多个 css 属性时代码会很繁琐;所以只要批量设置一个元素的多个 css 属性,都用 class 代替 .style。
二、添加/删除元素
1. 添加一个新元素
(1)创建一个新的空元素对象:
var 新元素对象=document.createElement("标签名") //eg: var a=document.createElement("a");//
(2)为新元素添加必要属性:
元素对象.属性名=新值 //eg: a.innerHTML="go to tmooc"; a.href="http://tmooc.cn"; // go to tmooc
(3)将新元素添加到 DOM 树的指定父元素下:
//在父元素下末尾追加新元素 父元素.appendChild(新元素) //在父元素下插入到一个现有子元素之前 父元素.insertBefore(新元素,现有子元素) //替换父元素下的一个现有的子元素 父元素.replaceChild(新元素,现有子元素)
举例:创建一个a元素和一个文本框;
2. 优化
修改 DOM 树的内容会导致重排重绘,但频繁重排重绘会降低页面加载的效率,如果父元素已经在页面上了,要添加多个平级子元素,就要借助于文档片段对象来实现。
文档片段是指内存中临时保存多个平级子元素的虚拟父元素,使用方法:
(1)先创建文档片段对象:
var 文档片段对象=document.createDocumentFragment();
(2)将子元素先添加到文档片段对象中
文档片段对象.appendChild(子元素)
(3)将文档片段对象一次性添加到页面上
父元素.appendChild(文档片段对象);
3. 删除元素
父元素.removeChild(子元素)
举例:动态生成表格;
姓名 | 薪资 | 年龄 | 删除 |
---|
CSS HTML
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。