当前位置: 首页 > 资讯 >

【Day23】我变我变我变变变:如何改变HTML元素的样式

「DOM API定义了JavaScript存取、改变HTML架构、内容、样式的方法,甚至对节点绑定的事件。」

前面几篇提到了JavaScript改变HTML架构与内容的方法,这一篇我们来谈谈怎麽改变HTML的样式。

再来看一下前面提到的「前端三要素」:

  • HTML负责网页的结构与内容
  • CSS负责网页的外观与样式
  • JavaScript负责网页的互动与行为

样式是由CSS负责,所以当我们想要改变HTML的样式,当然就是要用JavaScript来处理CSS这一块,而这都要先从选取到某个节点开始。

  • 选取HTML元素,直接修改style属性
  • 透过className属性来修改style样式。
  • 用classList属性,透过删除或新增class来修改style样式
  • 用setAttribute()来更改class属性

直接修改HTML元素的style

使用JavaScript直接修改HTML元素的style,因为这种方式是透过DOM API直接修改元素的行内样式,样式的优先权会比其他样式的写法高出许多。

//可以在'string'中指定许多种样式,样式之间用;隔开就
node.style.cssText = 'string';

//也可以把某个样式,例如字型大小单独挑出来
node.style.fontSize = '24px';

我们试着把黄药师写的诗,用JavaScript来改变其样式:

<div class="style1" style="color: red; font-size: 45px; border: 3px solid;width: 400px;">
  桃花影落飞神剑,
</div>
<div class="style2" style="color: yellow;font-size: 45px;text-decoration:underline;">
  碧海潮生按玉箫
</div>

看看下面的JavaScript,cssText将要改的样式写在同一行,而且会完全盖掉本来写在style1的全部样式,我在cssText里面并没有输入border的参数,而本来写在行内样式的border却被完全清除了,最後网页上呈现的结果并没有border。

如果用「style.CSS属性名称」的方式,就可以针对想要改变的属性来做处理。唯一要注意的是有些CSS属性名称中间有 - 的破折号,如font-size、font-weight… 等等属性,但是在JavaScript的变数及物件属性名称是不允许使用 - 破折号,这时属性名称就要改成「驼峰式」写法,如fontSize。

var el1 = document.querySelector(".style1").style.cssText = 'font-size: 24px; color: green;';
var el2 = document.querySelector(".style2");
el2.style.fontSize = "16px";
el2.style.color = "blue";

透过className属性来修改style样式

透过修改HTML「行内样式」来调整网页的外观,虽然很方便,但是我们说过「CSS负责网页的外观与样式」,如果老是透过「行内样式」来调整网页外观,就做不到HTML、CSS、JavaScript三者「关注点分离」,而且实务上,大多是以HTML连结CSS档案的方式来设定网页的外观与样式。

那要如何透过修改HTML标签的class属性,来改变元素的样式呢?

JavaScript提供了className的属性来修改HTML元素的class。

node.className = '元素的class名称'

我们一样用黄药师的诗来讲解,我们给它两个class属性,分别为 redfont与bigtitle。

<h1 class="redfont bigtitle">桃花影落飞神剑,碧海潮生按玉箫</h1>

以下为外部CSS档的内容:

.redfont {
  color: red;
}
.bigtitle {
  font-size: 40px;
}
.bluefont {
  color: blue;
}

先选取节点,然後用className的方法,把 <h1> 标签的本来的 class 取代为 bluefont,我们会发现,除了本来的redfont 之外,连 bigtitle 也被清除掉了。所以如果本来HTML标签有设定多组 class 属性,用 className 的方法并不会保留其他没有被修改的属性,而是整个 class 被清空,再以className 新增的属性取代。

var el = document.querySelector('.redfont');
el.className = 'bluefont'

用classList属性,透过删除或新增class来修改style样式

classList 与 className 不同之处在於不能直接修改,而是必须透过 claaList.add() 与 classList.remove() 来增加与删减 HTML 标签的 class 属性,如果你的 HTML 标签有 red 与 big 两个 class 样式,你想把 red 改成 green,必须先 classList.remove(red) ,把 red 这个 class 移除,然後再 classList.add(green) ,把 green 这个 class 加入。

<h1 class="redfont bigtitle">桃花影落飞神剑,碧海潮生按玉箫</h1>

这是CSS档:

.redfont {
  color: red;
}
.bigtitle {
  font-size: 40px;
}
.greenfont {
  color: green;
}

而这是JavaScript,用来改变 <h1> 标签内的class,redfont会被greenfont置换,而bigtitle会保留下来。

var el = document.querySelector('.redfont');
el.classList.remove('redfont');
el.classList.add('greenfont');

还有一个切换 class 的方法,那就是el.classList.toogle('class名称') ,当所选的元素没有这个class样式的时候,就新增这个样式;如果已经有这个 class 样式的时候,就会变成删除它。

var el = document.querySelector('.redfont');
el.classList.toggle('redfont'); //现在是增加
el.classList.toggle('redfont'); //现在是删除

用setAttribute()来更改class属性

还有一种方式可以用来更改 HTML 元素的 class 属性,但是它的使用范围更广泛一些:

element.setAttribute('属性名称','属性值');
//属性名称可以是 class、 id、 href
//属性值对应的分别是 class名称、 id名称 及 网址 

让我们来看看怎麽做:

<h1 class="redfont bigtitle">桃花影落飞神剑,碧海潮生按玉箫</h1>
.redfont {
  color: red;
}
.bigtitle {
  font-size: 40px;
}
.bluefont {
  color: blue;
}
var el = document.querySelector('.redfont');
el.setAttribute('class','bluefont');

用 setAttribute() 来修改 HTML 元素的 class ,跟className 一样,也是会先把 class 清空,再用新增的class 设定值取代,所以 bigtitle 这个 class 也会被清除掉。

以上就是几种修改HTML元素样式的方法。


相关文章:

  • Youtube Analytics API 教学 - 请出示身分 Python OAuth 2.0
  • 缺乏计画的目标,只能叫做愿望。----目标设定篇(上)
  • 【第九天 - Flutter Bloc+Cubit 架构教学】
  • AI ninja project [day 11] 图片分类(1)
  • Day 27- 鬼斧神工 :Serverless 电商 - 实战 - 後端开发 (三)资料库存取
  • Day27 - 登出及连线中断
  • Day 10 [Python ML、特徵工程] 特徵生成
  • Day20. 懂Bootstrap,并让Bootstrap带你上天堂
  • 【设计+切版30天实作】|Day21 - PainPoints - 怎麽切出标题底下的highlight 装饰?
  • Day20 - 在 XState 与 Side Effect 互动吧~ action API
  • 安装 Django 在 Amazon Linux 2-Day 04
  • OpenStack Neutron 介绍 — OVN Plug-in 架构
  • Day12 Sideproject(作品集) from 0 to 1 -docker後端
  • Day 21 | MediaPlayer
  • Day 07-制作购物车系统环境之Node.js
  • 菲律宾虚拟卡预付卡大全
  • VPS优惠信息:阿里云/限时活动/新用户1C2G1M/69元/年起
  • DNS是什么?DNS有什么用?为什么要用DNS解析域名
  • SiteGround域名转移教程:如何转出SiteGround域名
  • WordPress 通过代码实现 Ajax 自动完成搜索
  • 教育邮箱:申请塔拉哈西社区学院edu邮箱
  • Hostinger主机如何添加一个新的域名(网站),如何更改主机的主域名(Main Domain)
  • 韩国Moack蘑菇CN2服务器评测和特价服务器,优惠码
  • Vultr / Digitalocean开通教程和购买教程,Vultr / Digitalocean如何切换IP教程方法
  • 国外抗攻击服务器推荐:DDOS高防服务器推荐
  • 网站更换域名后副作用大吗?针对谷歌如何更换域名
  • PayPal解决找回密码时无法检验身份问题
  • Linux入门:Linux文件操作教程(目录文件操作和系统资源占用情况操作)
  • 一周要闻:谷歌母公司、Facebook、亚马逊等几大互联网公司一季度财报
  • 什么是301重定向?如何在WordPress网站创建301重定向?