javascript中使用setAttribute给属性赋值和直接赋值对比

最新推荐文章于 2021-11-16 22:05:47 发布
最新推荐文章于 2021-11-16 22:05:47 发布
阅读量5.2k 收藏 6
点赞数
文章标签： setAttribute javascript value
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czh500/article/details/88384118
版权

javascript中使用setAttribute给属性赋值和直接赋值对比

直接po图和代码

下面是源代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试setAttribute用法</title>
<style type="text/css">
div {
background-color: #71C671;
border-radius:5px;
border:4px solid green;
}
</style>
<script type="text/javascript">
	
	//给文本框赋值
	function setInputNodeValue(){
		var inputNode = document.getElementById("input1");
		inputNode.size = 60;
		//节点.value这种写法，效果是，直接给节点赋值(不会给节点添加value属性)
		inputNode.value = "江西省赣州市于都县";
	}
	
	//给文本框赋值
	function setInput2NodeValue(){
		var input2Node = document.getElementById("input2");
		input2Node.setAttribute("size", "60");
		//节点.setAttribute("value", "")这种写法，效果是，不但给节点赋值，还会给节点添加value属性
		input2Node.setAttribute("value", "我的家乡在江西省赣州市于都县");
	}
</script>
</head>
<body>
<input type="button" onclick="setInputNodeValue()" value="点击我，给文本框赋值">
<input type="text" id="input1">
<br>
<input type="button" onclick="setInput2NodeValue()" value="点击我，给文本框赋值">
<input type="text" id="input2">
</body>
</html>

 

程宇寒
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS: input 元素 input.value 与 setAttribute() 的区别
JethroLiu的博客
07-15 2576
先写一个带有value的input元素 <input id="myinput" type="text" value="小明"> 我们先打印一下它： let myInput = document.getElementById("myinput"); console.log(myInput); 看看结果 输入框里面文本就是value的值小明 现在我们去掉它的value属性，用javascript为他添加value： <input id="myinput" type="text"&
【Javascript】setAttribute()方法
O(∩_∩)O
12-16 677
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。 语法： elementNode.setAttribute(name,value) 说明： 1.name: 要设置的属性名。 2.value: 要设置的属性值。 注意： 1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
request.setAttribute中的value
Abracadabra__的博客
12-26 440
1.背景 “&lt;%=value%&gt;” 和 “${value}” 写一个html报表进行打印，动态的给报表赋值，结果页面一直无法取到值。 2.html页面截图 3.html前台取值 4.后台设值 5.原因分析 前台的${wgbtHrbtmxList}，C:foreach中判断的是java文件中的setAttribute，request.setAttribute("wgbtHrbtm...
JS setAttribute()方法：设置元素的属性值
风口上的猪博客
11-08 1万+
在JavaScript中，使用元素的 setAttribute() 方法可以设置元素的属性值。用法如下： setAttribute(name, value) 参数 name 和 value 分别表示属性名称和属性值。属性名和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则setAttribute() 方法将为元素创建该属性并赋值。 示例1 下面示例分别为页面中 div 元素设置 title 属性。 <div id="red">红...
setData()函数和直接赋值的区别
qq_44695511的博客
12-09 1073
wxml: <view> <block wx:for="{{dataArray}}" wx:key="id"> <v-book book="{{item}}" /> </block> </view> js: this.setData({ dataArray: [] }) //this.data.dataArray = [] 1、dataArray数据要渲染在wxml页面上 2、如果只是使用this.data
javascript中setAttribute兼容性用法分析
10-20
总结，`setAttribute`在JavaScript中是一个强大的工具，但需要谨慎使用，特别是在处理样式、事件和保留字属性时。通过理解其兼容性问题并采取适当的策略，我们可以编写出能在各种浏览器上工作的可靠代码。
vue项目里面引用svg文件并给svg里面的元素赋值
10-14
在Vue中，可以直接使用`ref`属性来获取SVG元素，或者在组件的`mounted`生命周期钩子中使用`document.getElementById`。例如，假设SVG文件中有id为`A1`的`<text>`元素，可以这样做： ```javascript export default {...
JavaScript中setAttribute用法介绍
01-19
setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。1、样式问题setAttribute(“class”, value)中class是指改变”class”这个属性，所以要带引号。...
通过js给html元素赋值
07-19
在给定的示例代码中，展示了如何使用JavaScript来动态添加和更新图片元素： ```javascript function shareway(checkbox, num) { var img = "<img id=\"im" + num + "\" src=\"\"/>"; // 创建一个新的图片元素 ...
1.17 JavaScript高级-JSON和DOM操作.pdf
最新发布
10-27
在 JavaScript 中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于 JavaScript 的一种子集，易于人们阅读和编写，同时也易于机器解析和生成。JSON 是一种用于数据交换的文本格式，它独立于...
getAttribute()与直接获取节点属性的区别
makerbeen的博客
10-28 1万+
关于getAttribute,setArribute,setArribute的理解 今天温习红宝书，看到264页DOM操作的取得特性，感觉很 疑惑之前获取特性一直都是直接获取可是为什么万能的高程书非得搞得这么麻烦弄出getArribute()这样的一个操作方法，所以我专门的去讨论了这三种方法，与直接操作属性的区别; 那么让我们先来看我们经常采取的一种获取标签中特性的方式
setAttribute 方法
qq_44943584的博客
04-20 1万+
setAttribute 方法
使用.添加属性和使用setattribute的区别
Academia_zhen的博客
09-25 6116
div id="ht">HTML5div> span id="html4">HTML4span> script> var sp = document.getElementsByTagName("span")[0]; sp.id = "html5"; console.dir(sp); var ht = document.getElementById("ht"); ht.index =
2021-11-16 setAttribute()方法的定义和用法,使用setAttribute对元素进行属性设置和其他常见使用场景
GAARA
11-16 740
文章目录 定义 语法 使用场景一:点击改变input文本框成为一个button按钮 代码 改进:value也用setAttribute设置 使用场景二:使用setAttribute()方法取消类名 使用场景三:使用setAttribute()方法和getAttribut()方法,解决for循环中无法获取自增中的i的bug 定义 setAttribute()方法是用于创建或者改变元素的某个新属性 (若指定属性已经存在,那么仅仅设置其属性值) 语法 element.setAttribute(name,valu
setAttribute()方法
热门推荐
qq_24193261的博客
09-18 2万+
setAttribute()方法 增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值 elementNode.setAttribute(name,value) 说明： 1.name：要设置的属性名 2.value:要设置的属性值 注意： 1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。 2.类似于getAttribute()方法，s
input 元素 value 与 setAttribute() 的区别
以爱护甲,爱满枫林。
11-11 1417
1. 普通的 input 元素 在页面上，有这样一个 input 元素。 <input id="myInput" type="text" value="Jethro" />; 我们分别用 input.value 和 getAttribute() 两种方式获取它 value 属性的值： let myInput = document.getElementById("myInput"); console.log(myInput); console.log(myInput.value);
C#-XML基础 XDocument Add xml文件添加根节点
心少朴
05-14 2119
 .NET Framework : 4.7.2        IDE : Visual Studio Community 2019         OS : Windows 10 x64     typesetting : Markdown         blog : blog.csdn.net/yushaopu        gi...
js向input的value赋值
lxw1844912514的博客
05-20 7256
js与jquery:在我印象里面都是一样的,今天利用空闲的时间来总结一下,js与jquery究竟有什么区别?js : 是一门网页的脚本语言jquery :jquery是基于js的一种框架,也就是说jquery 就对 js 的一个扩展，封装，就是让javascript更好用，更简单，jquery就是要用更少的代码，漂亮的完成更多的功能。文本框如下 <input type="...
你如何解决给控件的value属性赋值后，再使用document.exeCommand("undo")无法撤销的问题
08-04
### 回答1： 很抱歉，在HTML页面中使用JavaScript赋值控件的value属性后，再使用`document.exeCommand("undo")`无法撤销是因为该命令仅支持文本编辑区域中的撤销操作，不能用于撤销对HTML元素属性的修改。 如果您需要实现对控件value属性的撤销操作，您可以手动记录对该属性的修改并在需要撤销时进行回退。例如，可以使用一个数组保存每次修改的值，并在需要撤销时从数组中取出上一个版本的值并重新赋值。 ### 回答2： 当给控件的value属性赋值后，使用document.exeCommand("undo")无法撤销的问题，是因为document.exeCommand("undo")只能撤销document对象的操作，而无法撤销控件的操作。 要解决这个问题，可以尝试以下几种方法： 1. 使用其他方法撤销操作：不使用document.exeCommand("undo")，而是使用其他方法来撤销操作，例如使用自定义的撤销功能函数来处理撤销操作。 2. 通过监听键盘事件来实现撤销：可以通过监听键盘事件来判断用户是否按下了撤销操作的快捷键，例如Ctrl+Z，然后在相应的事件处理函数中手动实现对控件的撤销操作。 3. 使用逆向操作实现撤销：在给控件的value属性赋值之前，将当前的value值保存到一个变量中，在需要撤销的时候，将保存的value值再次赋值给控件的value属性，从而达到撤销操作的效果。 4. 通过备份和还原控件的value属性来实现撤销：在给控件的value属性赋值之前，将当前的value值备份到一个变量中，在需要撤销的时候，将备份的value值再次赋值给控件的value属性，从而达到撤销操作的效果。 需要注意的是，以上方法都需要针对具体的控件类型和操作进行相应的处理，具体的实现方式可能会略有差异。 ### 回答3： 遇到给控件的value属性赋值后，再使用document.exeCommand("undo")无法撤销的问题时，我可以采取以下的解决方案： 1. 使用自定义的撤销功能：在控件的value属性赋值之前，将当前的value值保存到一个变量中，然后在需要撤销时，将该变量的值重新赋给value属性即可。 示例代码如下： ```javascript // 在给value属性赋值之前 var previousValue = document.getElementById("myInput").value; // 给value属性赋值 document.getElementById("myInput").value = "新的值"; // 在需要撤销时，重新赋值为之前的值 document.getElementById("myInput").value = previousValue; ``` 2. 使用其他方式修改控件的值：如果使用value属性赋值后无法撤销，可以尝试使用其他方式修改控件的值，比如使用innerText或innerHTML属性来修改输入框的文本内容，或者使用setAttribute方法来修改input元素的value属性值。这样在使用document.exeCommand("undo")时，就可以成功地撤销修改。 示例代码如下： ```javascript // 修改输入框的文本内容 document.getElementById("myInput").innerText = "新的值"; // 或者使用setAttribute方法修改value属性值 document.getElementById("myInput").setAttribute("value", "新的值"); ``` 通过采取以上的解决方案，就可以解决给控件的value属性赋值后，再使用document.exeCommand("undo")无法撤销的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值