html元素,属性修改

简介: html通过js修改页面中内容,标签属性,为标签添加id与class,为标签删除属性。
修改html页面内容

title.textContent="<i>js还可以修改元素内容</i>";
title.innerHTML="<i>js还可以修改元素的内容</i>";
 
textContent设置的内容中标签会显示为标签文本 会将i标签也显示出来,不会显示斜体
innerHtml中的标签会被解析为元素对象 显示斜体



修改html样式
var title = document.getElementById( "title" );
 
// 元素对象通过style属性修改样式。
title.style.color = "red" ;
// 在css中样式是通过-分隔,在js中,样式名要用驼峰命名法
title.style.fontSize = "20px" ;
  // 通过js修改的样式实际上修改的是元素的行内样式


通过同名属性修改
// 大部分的html属性,都可以在js中通过元素对象的同名属性进行修改
例如a标签的href属性,
img的src属性,
input的placehodeer属性等
link.href = "http://www.eotodo.com" ;



 
// 元素对象的classList表示元素的class列表,。add方法用于添加一个class值。
title.classList.add( "c1" );
// .remove删除一个class值
title.classList.remove( "c3" );
 
// toggle.切换一个class值(有则删除,无则添加
title.classList.toggle( "c1" );
 
// 判断某个元素的class中是否包含某个值
console.log(title.classList.contains( "c4" ));
 
// 对于元素的class属性,它可以设置多个值。

它是一个列表形式的数据,修改时不会修改全部,

而是添加一个class值或删除一个已有的class值,

所以class的修改不能直接改元素对象的class属性。

 
// title.class="c1"; 错误的写法



我的个人博客网站:http://www.eotodo.com/ 分享前端知识
目录
相关文章
WK
|
2月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
55 1
|
3天前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
3天前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
25天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
25天前
|
前端开发 搜索推荐 算法
|
25天前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
25天前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
HTML 属性
HTML属性为元素提供额外信息,格式为name=&quot;value&quot;,置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。