章节
问答
课签
笔记
评论
占位
占位

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:

Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

基本属性表(property):

注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

看看下面的代码:

改变 <p> 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝:

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

结果:

任务

现在我们来改变下HTML中元素的CSS样式:

1. 在右边编辑器中,第12行补充代码,修改h2标签的样式,将颜色设为红色。

2. 在右边编辑器中,第13行补充代码,修改h2标签的样式,将背景颜色设为灰色(#CCC)。

3. 在右边编辑器中,第14行补充代码,修改h2标签的样式,将宽设为300px。

?不会了怎么办

1. 改变文字颜色:mychar.style.color="red";

2. 改变背景颜色:mychar.style.backgroundColor ="#ccc";

3. 改变元素宽度:mychar.style.width="300px";

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 虎虎虎0222
backgroundColor 背景颜色  C 大写,驼峰命名规则。

最新回答 / 慕工程4467830
多练不仅能记住,还能有助于你了解深刻以及运用

最赞回答 / 新翼0510
因为代码执行顺序是从上至下,执行var mychar= document.getElementById("con");的时候,还没找到con。执行到body部分后,下面没有代码,自然不回生效。

最新回答 / weixin_慕设计2192336
解决了,字体大小属性值要加“px”

最新回答 / 慕后端5344949
答题有积分,积分可以用来xxxx

最赞回答 / 或许是我
而且字体颜色也不对

最赞回答 / HEML萌新
你先回去把HTML学下,不然基础的东西分不清很麻烦

最新回答 / 慕设计9378458
<...code...>意思是:通过id属性将con变量赋值给mychar变量,    所以此时的mychar变量就等于con变量。但是已经通过id属性获取到了con变量,所以使用的是mychar变量。

最新回答 / bugtrap
还可以

最赞回答 / 外星飞碟66
用户会自己去改css吗????用户肯定只会点个按钮啊,点了按钮触发js的onclick点击事件,通过事件变换css呗。

最赞回答 / 静爷galaxy
背景颜色mychar.style.backgroundColor=“#ccc”,你少写了Color

最新回答 / weixin_慕婉清0268562
background可以设置背景颜色、背景图片、定位等。而background-color只能设置背景颜色 。

最赞回答 / phoeboe
你的第14行代码有点小问题,你的是:“width=300PX;”,这里面有两个问题:第一、width的属性要加上引号“”,即width="像素值";第二、像素值的单位px应该是小写哈~

已采纳回答 / 飞天火狐狸
<title>标签,是在浏览器最顶部的标签里显示的,比如我现在的回答页面就是这个title<...图片...>

最赞回答 / 晓之蛇
要加引号,不加的话控制台报语法错误:Uncaught SyntaxError: Invalid or unexpected token <...图片...>
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言