js添加属性的方法（js中向对象中添加属性的两种方法）

本文目录

• js中向对象中添加属性的两种方法
• js 动态添加元素（div、li、img等）及设置属性的方法
• JS 增加新属性
• js里面怎么动态的为对象添加属性
• 通过js动态创建标签,并设置属性方法

js中向对象中添加属性的两种方法

1.1 数据属性（`properties`），对象的普通属性将字符串名称映射到值。例如，下面对象obj有一个数据属性，名称为 prop，对应的值为 123：var obj = {prop: 123};可以用以下方式读取属性的值：console.log(obj.prop); // 123，console.log(obj = "abc";

1.2 访问器属性，另外，可以通过函数处理获取和设置属性值。 这些函数称为访问器函数。 处理获取的函数称为getter。 处理设置的函数称为setter：var obj = {get prop () {return ’Getter’;},set prop (value) {console.log(’Setter: ’ + value);}}访问 obj 属性：》 obj.prop’Getter’》 obj.prop = 123;Setter: 123。

1.3 内部属性一些属性只是用于规范，这些属于“内部”的属性,因为它们不能直接访问,但是它们确实影响对象的行为。内部属性有特殊的名称都写在两个方括号，如：内部属性指向对象的原型。它可以通过Object.getPrototypeOf()读取。它的值只能通过创建具有给定原型的新对象来设置，例如通过object.create()或__proto__ 。

内部属性决定是否可以向对象添加属性。可以通过Object.isExtensible() 方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。可以通过Object.preventExtensions()方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。

属性特性(attribute)，属性的所有状态，包括数据和元数据，都存储在特性(attribute)中。它们是属性具有的字段，就像对象具有属性一样。特性(attribute)键通常用双括号编写：

js 动态添加元素（div、li、img等）及设置属性的方法

把一串
html
标签赋给一个
javascript
变量，除属性的值要用转义的双引号外，某些时候字符串还很长，显得有些复杂。如果用
js
动态添加元素，就不会有那么复杂的字符串出现，代码阅读性强一点，也容易理解。
网页是由
html
标签一层层组成的，js
也可以动态添加一层层的诸如
div、li、img
这样的标签。其实，不管是什么
html
标签，js
动态创建的方法都差不多，接着就先从动态添加
div
开始。
一、js
动态添加元素div
《div
id="parent"》《/div》
　　function
addElementDiv(obj)
{
　　　　var
parent
=
document.getElementById(obj);
　　　　//添加
div
　　　　var
div
=
document.createElement("div");
　　　　//设置
div
属性，如
id
　　　　div.setAttribute("id",
"newDiv");
　　　　div.innerHTML
=
"js
动态添加div";
　　　　parent.appendChild(div);
　　}
调用：addElementDiv("parent");
二、js
动态添加li
《ul
id="parentUl"》《li》原li《/li》《/ul》
　　function
addElementLi(obj)
{
　　　　var
ul
=
document.getElementById(obj);
　　　　//添加
li
　　　　var
li
=
document.createElement("li");
　　　　//设置
li
属性，如
id
　　　　li.setAttribute("id",
"newli");
　　　　li.innerHTML
=
"js
动态添加li";
　　　　ul.appendChild(li);
　　}
调用：addElementLi("parentUl");
三、js
动态添加元素img
《ul
id="parentUl"》《/ul》
　　function
addElementImg(obj)
{
　　　　var
ul
=
document.getElementById(obj);
　　　　//添加
li
　　　　var
li
=
document.createElement("li");
　　　　//添加
img
　　　　var
img
=
document.createElement("img");
　　　　//设置
img
属性，如
id
　　　　img.setAttribute("id",
"newImg");
　　　　//设置
img
图片地址
　　　　img.src
=
"/images/prod.jpg";
　　　　li.appendChild(img);
　　　　ul.appendChild(li);
　　}
调用：addElementImg("parentUl");
以上这篇js
动态添加元素(div、li、img等)及设置属性的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

JS 增加新属性

首先，你给这个img增加一个ID属性，比如ID=“test”
《img id = "test" src="/logo.jpg" \》
此时，你可以写一个js代码如下：
var oimg = document.getElementById("test");
if(oimg)
{
oimg.alt=""; //你要添加的属性。
}
若不想添加ID，也可以遍历网页上所有的img，来比较src是否是某个值来确定是否是你想修改的，然后修改。

js里面怎么动态的为对象添加属性

添加属性用setAttribute()方法，可以传入两个参数，第一个是属性名称，第二个是要设置的属性值

var li = document.getElementsByTagName(’li’);
//设置 li 属性，如 data-falg,设置为true
li.setAttribute("data-falg", "true");

也可以获取属性用getAttribute(),传入一个参数，是想获取的属性名称，返回的是该属性的值

通过js动态创建标签,并设置属性方法

当我们在写jsp页面时，往往会遇到这种情况：从后台获取的数据个数不确定，此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签：
1.创建某个标签：如下在body中创建一个div的事例；
《script》
function
fun(){
var
frameDiv
=
document.createElement("div");//创建一个标签
var
bodyFa
=
document.getElementById("bodyid");//通过id号获取frameDiv
的父类（也就是上一级的节点）
bodyFa
.appendChild(frameDiv);//把创建的节点frameDiv
添加到父类body
中；
}
《script》
《body
id="bodyid"
》
《!--在此添加div标签--》
《/body》
2.添加属性：给创建的标签添加相应的属性：
frameDiv
.setAttribute("id",
"divid");//给创建的div设置id值；
frameDiv
.className="divclass";
//给创建的div设置class；
//给某个标签添加显示的值；
var
h
=
document.createElement("h1");
h.innerHTML
=
data.name;
var
p
=
document.createElement("p");
p.innerHTML
=
"要显示的值";
3.创建的标签添加事件：
a.不带参数：
frameDiv.onmousedown
=
fun;//ps：函数名fun后面一定不能带括号，否则会在创建标签的时候执行函数，
而不是鼠标按下时执行；
b.有参数：
frameDiv.onmousedown
=
function(){
fun(this);
}
c.要调用的函数；
function
fun(){
alert("鼠标按下");
}
4.如果担心创建的标签没有被覆盖则可以替换：
var
divFlag
=
document.getElementById("divFlag");
var
divMain
=
document.createElement("div");
if(divFlag
!=
null){
body.replaceChild(divMain,
divFlag);//把原来的替换掉
}
divMain.setAttribute("id",
"divFlag");
以上这篇通过js动态创建标签,并设置属性方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:JS实现给对象动态添加属性的方法JS中动态创建元素的三种方法总结(推荐)js动态创建标签示例代码使用变量动态设置js的属性名