界面设计网站推荐,网站建设费记到什么科目,iis架设网站教程,dede 网站打开慢说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ 改变元素节点的css样式⭐ 改变元素节点的HTML属性⭐ 扩展nodeType常用属性值 ⭐ 改变元素节点的css样式 改变元素节点的CSS样式的语法示例 oBox.style.backgroundColor red;
oBox.style.backgroundImage url(images/1.png);
oBox.style.fontSize 32px;需要注意的是属性的名字要用”驼峰“的形式去写因为js中短横线就是减号所以不能用短横线写。
所以想要改变一个css的属性值就用上面的语法形式写就可以了。
为什么要使用js来改变css的样式呢这个在后面写到事件监听的时候会有很大的用处比如监听到鼠标点击按钮的事件就可以利用js改变按钮的样式呈现出很好的动画效果。
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box {width: 100px;height: 100px;background-color: red;}/style
/head
bodydiv idbox/divscriptvar box document.getElementById(box); //获取元素节点box.style.backgroundColor green; //改变背景颜色box.style.borderRadius 50%; //改变圆角/script
/body
/html设置的样式是通过”行内“的形式设置的 ⭐ 改变元素节点的HTML属性 标准W3C属性如src、href等等只需要直接打点进行更改即可 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg src/images/1.jpg alt idpica hrefhttps://www.baidu.com/ idbaidu去百度/ascript//获取节点var oPic document.getElementById(pic);var oLink document.getElementById(baidu);//更改HTML属性oPic.src /images/2.jpg;oLink.href https://news.baidu.com/;oLink.innerText 去百度新闻;/script
/body
/html不符合W3C标准的属性如data-n等等需使用setAttribute()和getAttribute()来设置、读取。 setAttribute()设置属性值 getAttribute()获取属性值 不符合W3C标准的属性是在开发过程中自定义的为了在具体的业务场景使用在这里不必纠结这个属性的意义。 示例代码
bodydiv idbox/divscriptvar box document.getElementById(box);box.setAttribute(data-n, 10); //设置一个不符合W3C规范的属性var n box.getAttribute(data-n); //获取一个不符合W3C规范的属性值alert(n);/script
/body⭐ 扩展nodeType常用属性值 节点的nodeType属性可以显示这个节点具体的类型。 nodeType节点类型1元素节点例如p和div3文字节点8注释节点9document节点10DT节点
