JavaScript基础之操作元素，修改元素属性

已于 2023-01-07 09:50:50 修改
阅读量295 收藏
点赞数
分类专栏： web前端基础笔记 文章标签： javascript getElementById querySelector
于 2021-10-27 16:09:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lu202032/article/details/120994984
版权

博主前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住也分享一下给大家，
👉点击跳转到网站

实现效果：
在这里插入图片描述
js代码如下：

<body>
		<button id="android">Android开发</button>
		<button id="java">Java开发</button><br>
		<img src="img/10b92e374bebdbe9b648ba29d1d7e72.png" title="Android">
		<script type="text/javascript">
			//事件源 
			var android = document.getElementById('android');
			var java = document.getElementById('java');
			var img = document.querySelector('img');
			//事件类型 点击
			android.onclick = function() {
				//事件处理程序 点击切换图片和鼠标经过时显示的文字信息
				img.src = 'img/10b92e374bebdbe9b648ba29d1d7e72.png';
				img.title = 'Android';
			}
			java.onclick = function() {
				img.src = 'img/221f6109f10f97406df83192d307a06.png';
				img.title = 'java';
			}
		</script>
</body>
路宇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
主要介绍了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法,涉及javascript dom模型及事件响应相关操作技巧,需要的朋友可以参考下
Vue 3-计算属性的getter,setter
Lin16819的博客
09-17 824
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JS中修改元素内容，属性，样式的方法【详解】
杜永康的博客
10-29 4442
如果把属性作为集合，那么样式就是这个集合的元素。样式（style）也是一种属性，样式后面的内容是样式（style）的属性值 属性值里面的内容为 样式名：样式值。所以这种修改有这个特点：修改后的内容会把之前原有的内容覆盖掉，只执行修改后的内容。这种方式，方便我们调试功能，修改元素属性。法一：获取元素名.style.样式名=‘样式值’法二：获取元素名.style=‘样式名：样式值’，color是样式名，red是样式值。获取元素名.属性名=‘属性值’
【前端】JavaScript-操作元素
qq_45764950的博客
11-09 954
所有元素全部清除样式给当前元素设置样式element.属性 //获取属性值（元素本身自带的属性）element.getAttribute('属性') //主要获取自定义的属性（标准）程序员自定义的属性element.属性='值' //设置内置属性值element.set Attribute('属性','值') //主要针对自定义属性自定义属性的目的：是为了保存和使用数据，有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取通过element.getAttribute('属性')
js怎样改变元素的内容、属性、样式
最新发布
子玉的博客
10-29 775
总结起来，我们可以使用 `innerHTML` 和 `textContent` 属性来改变元素的内容，使用 `setAttribute()` 方法或直接修改属性值来改变元素的属性，以及使用 `style` 属性来改变元素的样式。- `style` 属性：用于设置或获取元素的样式。这将把具有 id 为 "myElement" 的元素的 "src" 属性更改为 "newImage.jpg"。这将把具有 id 为 "myElement" 的元素的 "src" 属性更改为 "newImage.jpg"。
JavaScript 使用js修改页面元素
路宇的博客
12-19 3953
下面我们通过使用js来修改p标签内文字的内容： HTML如下： <div style="margin: 20px 0"> <button id="showTime">显示当前时间</button> </div> <div id="time">2021-12-19</div> 之后通过js来修改id=“time” div中的元素，代码如下： var showTime = document.qu
JavaScript改变HTML元素的样式改变CSS及元素属性
10-26
改变CSS及元素属性的方法有很多，在本文将为大家介绍下使用js是如何做到的，感兴趣的朋友可以感受下
javascript实现dom元素可拖动
10-22
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for ...通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
jQuery第三课 修改元素属性及内容的代码
01-19
1. 操作属性 上文介绍了如何筛选到需要的元素。得到了元素之后就要对其进行操作。一个常见的需求是遍历得到的元素集，对每一个元素进行一个操作。jQuery提供的函数是 each(iterator)，其中iterator是一个函数，接受...
JavaScript（JS）获取元素、改变元素的内容、修改属性
Dreamer
11-16 1万+
文档对象模型DOM 文档对象模型DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 根据ID获取元素 使用getElementByld()方法可以获取带有ID的元素对象。 <body> <div id="time"> 2020.11.15 </div> <script> var timer = document.ge
JS获取元素、修改元素的内容、样式、属性--详解
合格程序猿
07-02 3123
JS获取元素、修改元素的内容、样式、属性--详解
javascript学习之＜button＞ 元素属性及方法
白话机器学习
08-04 1570
该属性可读写，一旦设置了值，点击后就会采用该属性指定的 HTTP 方法，而不是。该属性可读写，一旦设置了值，点击按钮会按照该属性指定的编码方式，而不是。该属性可读写，一旦设置了值，点击按钮就会提交到该属性指定的 URL，而不是。属性是一个字符串，指定了提交了表单以后，哪个窗口展示服务器返回的内容。属性是一个布尔值，表示点击按钮提交表单时，是否要跳过表单校验的步骤。属性是一个表单元素，返回该按钮所在的表单。属性是一个布尔值，表示该按钮提交表单时是否将被校验，默认为。属性是一个布尔值，表示该按钮是否禁止点击。
js 动态改变imput type属性
waixin的专栏
10-23 4259
 script type="text/javascript">    function shoppw(thebox)...{        var ps = document.getElementById(ps);        var pass = document.getElementById(pass);        ps.removeChild(pass);       
html客户端和服务器端,如何通过单击按钮来更改HTML元素属性的值（在客户端和服务器端）？...
weixin_30567751的博客
06-10 619
所以假设之情况是，JS是在button的点击调用。现在，当点击该按钮并调用JS函数时，整个网页已经被加载。所以，如果我通过从JS在URL从XMLHTTPRequest.open()功能(以及使用该方法GET)传递的变量，该变量被发送到$_REQUEST阵列上的服务器端。1.现在，由于页面已经被加载，所以在元素已经显示的情况下，如何对元素属性的值进行更改。之情况： -我有一个PHP array与HT...
如何使用JS修改页面元素（附练习案例）
ZZZzzz98的博客
10-20 1484
使用不同方法实现对页面元素、属性以及CSS进行修改（三个案例帮你快速掌握）
DOM 元素 (节点)
可达鸭的博客
06-30 305
创建一个新的节点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> &lt
js 设置button 的disabled属性
热门推荐
小小猪的专栏
12-01 3万+
.net 页面中，需有有一个button按钮，点击后，设置本按钮的disabled属性，并触发服务器端事件。代码如下：html:             c#  protected void Button1_Click(object sender, EventArgs e)    {  } 但是问题来了，他只触发了客户端事件，服务器端事件压根就没有执行。查了一下资料
改变某个元素属性值的方法
AndrewNeo
04-01 6617
第一种： element.value = "this new value"; 第二种： element.setAttribute("value","the new value"); 案例一： &lt;!-- 改变某个元素属性值的方法 --&gt; &lt;img id="targetPic" src="images/coffice.jpg" alt="&
JavaScript修改伪元素
03-31
作为AI语言模型，我不具备JavaScript的能力，但是我可以向您解释如何通过JavaScript修改伪元素。 在CSS中，伪元素用于在元素的某个部分添加样式，例如：`:before`和`:after`用于在元素的内容之前或之后添加样式。 要通过JavaScript修改伪元素，您需要使用CSS属性`content`和`attr`。您可以使用`content`属性来设置伪元素的内容，使用`attr`属性来获取元素的属性并将其放入伪元素中。 以下是一个示例： ```html <div id="example" data-content="Hello"></div> ``` ```css #example:before { content: attr(data-content); } ``` ```javascript const element = document.getElementById("example"); element.setAttribute("data-content", "World"); ``` 在上面的示例中，我们在`<div>`元素的`data-content`属性中设置了伪元素的内容。在CSS中，我们使用`attr(data-content)`将该属性的值添加到伪元素的内容中。然后，我们使用JavaScript来更改`data-content`属性的值，这会自动更新伪元素的内容。 请注意，您只能使用JavaScript来更改伪元素的内容，而不能更改CSS定义的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

路宇

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值