怎么用JS给一个HTML元素增加一个属性和值

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，填充问题基础代码。

2、在indexhtml中的<script>标签，输入js代码：$('#txt')val('添加值');$('#txt')attr('data', 'test');。

3、浏览器运行indexhtml页面，此时input元素成功被添加了值和属性。

用JS获取Html标签属性有两种方法：

如<a id="link" href=">

用JS获取Html标签属性有两种方法：

如<a id="link" href=">

js获取html添加的元素属性方法：先给这个元素设个ID，再用js获取这个ID的属性，即元素属性，实现案例如下：

<a id="link" href="前端学习" title="测试" blogname="前端开发">Web开发</a>

JS代码：

var ka=documentgetElementByI d("link");

alert(kagetAttribute("id"));//获取到Html标签的自定义属性

alert(kaid);//获取到Html标签常规属性用

最简单的方法就是用元素的innerHTML属性赋值，如：myNewElementinnerHTML = “我是文本”;但这样不能清晰的体现DOM中新增加了一个文本节点。

然后另一种添加文本节点的方式，可分为两步：

1、创建节点：文本节点的创建使用createTextNode方法，如：var myText = documentcreateTextNode(“我是文本”);

2、将创建的节点用appendChild方法添加某个元素下。如：myNewElementappendChild(myText);这样myNewElement就有myText的文本节点，文本节点的内容是“我是文本”即可。

获取属性节点

第一种方法：获取官方定义的属性节点(获取元素的对应属性值)。

格式：元素节点，属性名。

注意：不能获取自定义属性的值。

代码如下：

consolelog(jsInputplaceholder);

alert("是时候展现真正的技术");

设置属性节点的值

公式：元素节点 属性名 = 新的属性值

代码如下：

//设置元素对应属性的值

//元素节点属性名 = 新的属性值

jsInputplaceholder = "sunck good";

第二种方法

公式：元素节点 getAttribute(属性名);

注意：还可以获取自定义属性的值。

代码：

consolelog(jsInputgetAttribute("my"));

设置自定属性的值

公式：元素节点 setAttribute(属性名, 新属性值);

注意：当属性不存在时，变为添加属性

代码：

//设置

//元素节点setAttribute(属性名, 新属性值);

jsInputsetAttribute("my", "sunck");

//注意：当属性不存在时，变为添加属性

jsInputsetAttribute("other", "sunck");

删除属性节点

公式：元素节点removeAttribute(属性名);

注意：某些低版本浏览器不支持

代码：

jsInputremoveAttribute("other");

consolelog(jsInput);

如果楼主引入了jq 可以使用 $('[probateclass="private"]')获取到节点

如果没有引入jq可以使用原生js定义一个函数 GetAttrElement(attr,val);参数一是属性参数二是属性对应的值

function GetAttrElement(attr,val){

var e= documentall;

var a= new Array();

for(var i=0;i<elength;i++){

if(e[i]getAttribute(attr)==val){

apush(e[i])

}

}

return a;

}

调用方式GetAttrElement("privateclass","private");这样就可以获取到了

打字不易忘采纳

可以用文本框对象的onchange事件oninput,onpropertychange,onchange的用法onchange触发事件必须满足两个条件：a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）b）当前对象失去焦点(onblur)；onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。停止冒泡事件if(e)//停止事件冒泡estopPropagation();elsewindoweventcancelBubble=true;执行上面的代码，单击输入框发现也会触发onpropertychange，输入一个值同样也会触发这个事件，这就证明了，只要有属性的值被修改就会触发该事件。第二、既然我们发现了这个特点，那就会有一个问题了：当我们有时在输入框值发生改变时希望执行一个函数 *** 作，但同时也要修改一个自定义的属性，这样onpropertychange就会被触发两次，这个可能并不是我们所希望的。猜想一下，既然提供了这么一个属性，那一定应该能获取到是哪个属性被改变了。试着获取参数个数及参数内容。XML/HTML代码复制代码代码如下:

以上就是关于怎么用JS给一个HTML元素增加一个属性和值全部的内容，包括:怎么用JS给一个HTML元素增加一个属性和值、js 怎么获取标签里的属性、怎样用JS获得标签中的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！