前端小白入门教程:JavaScript中如何操作元素内容?

操作元素样式有两种方式,一种是操作style属性,一种是操作className属性,下面我们分别进行讲解。

1. 操作style属性

除了前面讲解的元素内容和属性外,对于元素对象的样式,可以直接通过“元素对象.style.样式属性名”的方式操作。样式属性名对应CSS样式名,但需要去掉CSS样式名里的半字线“-”,并将半字线后面的英文的首字母大写。例如,设置字体大小的样式名font-size,对应的样式属性名为fontSize。

为了便于读者的学习使用,下面我们通过表1列出常用style属性中CSS样式名称的书写及说明。

表1 常见的style属性操作的样式名

名称说明
background设置或返回元素的背景属性
display设置或返回元素的显示类型
fontSize设置或返回元素的字体大小
height设置或返回元素的高度
left设置或返回定位元素的左部位置
listStyleType设置或返回列表项标记的类型
overflow设置或返回如何处理呈现在元素框外面的内容
textAlign设置或返回文本的水平对齐方式
textDecoration设置或返回文本的修饰
textIndent设置或返回文本第一行的缩进
transform向元素应用2D或3D转换

接下来,通过代码演示如何对元素的样式进行添加,具体示例如下。

  <div id="box"></div>

   <script>

    var ele = document.querySelector('#box'); // 获取元素对象

    ele.style.width = '100px';

    ele.style.height = '100px';

    ele.style.transform = 'rotate(7deg)';

   </script>

上述第4~6行代码用于为获取的ele元素对象添加样式,其效果相当于在CSS中添加以下样式。

#box {width: 100px; height: 100px; transform: rotate(7deg);}

2. 操作className属性

在开发中,如果样式修改较多,可以采取操作类名的方式更改元素样式,语法为“元素对象.className”。访问className属性的值表示获取元素的类名,为className属性赋值表示更改元素类名。如果元素有多个类名,在className中以空格分隔。

接下来,通过代码演示如何使用className更改元素的样式。

(1)编写html结构代码,具体示例如下。

  <style>

    div {

     width: 100px;

     height: 100px;

     background-color: pink;

    } 

   </style>

   <body>

    <div class="first">文本</div>

  </body>

上述代码中,第9行给div元素添加first类,并在style中设置了first的样式,浏览器预览效果如图1所示。
在这里插入图片描述
图1 初始效果

(2)单击div元素更改元素的样式,示例代码如下。

  <script>

    var test = document.querySelector('div');

    test.onclick = function () {

     this.className = 'change';

    };

   </script>

上述代码中,第2行获取div元素存储在test对象中。第3~5行为text对象添加onclick单击事件,第4行执行事件处理程序使用this.className给test对象设置change类名,其中this指的是test对象。

(3)在style中添加change类,样式代码如下。

   .change {

    background-color: purple;

    color: #fff;

    font-size: 25px;

    margin-top: 100px;

   }

(4)单击div盒子,浏览器预览效果如图2所示。
1622445279403_12.jpg
图2 单击后效果

执行上述代码之后,会直接把原先的类名first修改为change,如果想要保留原先的类名,可以采取多类名选择器的方式,修改第(2)步的第4行代码,示例代码如下。

this.className = 'first change';

修改之后,在控制台查看到div元素的类已经修改成了<div class="first change">文本</div>,保留了之前的类名。

  • 0
    点赞
  • 3
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
html5前端入门视频教程从入门到精通小白需学 第一部分:课程体系解读 http://pan.baidu.com/s/1o7B9OYA 第二部分:微案例讲解 https://pan.baidu.com/s/1nwyNFg1 第三部分:知识点讲解 http://pan.baidu.com/s/1jICHs9o Vue组件之手机通讯录实战课程 http://pan.baidu.com/s/1c1FrXLY 微信小程序基础与实战 https://pan.baidu.com/s/1xE35SQcvW0sCF2NoR_ONiw HTML5课程体系解读 这一部分重点介绍了HTML、CSSJavaScriptWeb三大前端核心技术,通过视频讲解,了解可以利用HTML+CSS做什么,另外对JavaScript语言特性进行详细的介绍,还有相关工具、后端语言,逻辑思维训练等知识点。此外结合现今流行框架,如:vue、react、angular、ionic等。并涉及多方向学习,多平台学习,如:小程序、react native、混合开发、JAVA、PHP、android等领域。 第二部分 微案例讲解 HTML5微案例讲解 本套视频教程主要通过一个一个小的案例,来让大家理解所学知识点,通过对知识点的合理利用,实现不同的交互效果。理论与实践结合能让更好的掌握理论与实际应用,微案例包括HTML5相关的各种项目,比如,页面布局,炫酷的动画效果,游戏开发,移动端开发,前后端开发等。设计内容之多,范围之广,对于各种开发需求都会有涉及,希望这套微案例教学视频,能在学习和工作帮助到大家。 第三部分 知识点讲解 第一章 HTML5基础 主要讲解HTML几个常用标签的语法和运用,表格的语法和相关属性,语法和相关属性. CSS基础 主要讲解CSS样式表的三种建立方法以及这三种方法的优先级问题,CSS的语法和常用选择符以及选择符的优先级 CSS核心属性 主要讲解CSS核心属性里和文本相关的属性、CSS核心属性里和列表相关的属性、CSS核心属性里和背景相关的属性、CSS核心属性里和背景相关的属性。 盒模型与文本溢出 主要讲解与盒模型这个概念相关的属性以及在实际操作的注意事项和文本溢出的相关属性。 元素类型 主要讲解元素的类型以及类型与类型之间的转换,同时在实际操作的简单运用 定位锚点 主要讲解元素的定位属性以及实例,如何设置锚点链接以及实例。 图片整合 主要讲解图片整合的概念及实例 宽度自适应 主要讲解元素在浏览器里或者在父元素如何做到宽高自适应 浏览器兼容 介绍了各大主流浏览器内核,主要讲解元素或属性在各大浏览器下的兼容性问题以及解决方法 表单表格高级 主要讲解表单的高级属性及运用 CSS3选择器和新增属性 主要讲解CSS3新增的选择器及用法,服务器端字体的调用和iconfont的使用步骤,CSS3新增的部分属性及用法。
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

传智教育集团

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值