前端 - 自定义属性

一. HTML 标签属性

HTML分为通用属性、自有属性和自定义属性

通用属性

1. id：规定元素的唯一 id
2. class：规定元素的类名
3. style：规定元素的行内样式（inline style）
4. title：规定元素的额外信息（可在工具提示中显示）

自有属性

有一些HTML标准属性不是通用的而是某一些标签特有的

1. a标签的href属性
2. img标签的src属性
3. form表单的action属性，method属性等

自定义属性

HTML规范也允许我们自定义一些属性。（最新规范中，推荐以data-开头）

自定义属性的设置

1. 打点设置（不会在标签中显示）
2. setAttribute 设置（会显示在标签里）

二、通用属性

获取属性值

element.属性 获取属性值

注意：
class是保留关键字，但是在element.getAttribute(‘属性’); 方法中可以直接使用；element.属性 写法则需要使用className代替

<div id="test" className="test" title="test" >11111</div>

 const target = document.getElementsByClassName('test')[0];
 console.log(target.title);  
 console.log(target.className); 
 console.log(target.id);  
 console.log(target.getAttribute('class')); 

设置属性值

element.属性 = ‘值’ 设置内置属性值

<div id="test" >11111</div>

 const target = document.getElementsByClassName('test')[0];
 console.log(target.id);   // test
 target.id = 'test2';
 console.log(target.id);   // test2

三、自定义属性

1.设置属性值

1. 直接设置
2. 获取属性值 element.gsetAttribute(‘属性’);

注意：
直接设置自定义属性可以设置成功并取到相应的值，但是没有设置到标签内，不会显示在标签里

2.获取属性值

1. 直接获取
2. 获取属性值 element.getAttribute(‘属性’);

const target = document.getElementsByClassName('test')[0];
console.log(target.name); // undefined
target.name = 'test';
console.log(target.name); // 'test'

const target = document.getElementsByClassName('test')[0];
console.log(target.gettAttribute('data-name'));   // undefined
target.setAttribute('data-name', 'test');
console.log(target.getAttribute('data-name'));  // 'test'

3. 移除属性

element.removeAttribute(“属性名”) 移除指定的属性

const target  = document.getElementsByClassName('test')[0];
target.removeAttribute('data-name');

4. 判断是否包含指定的属性

element.hasAttribute(“属性名”) 判断元素里面有没有对应的属性名

结果会返回布尔类型的值，true或false

const target  = document.getElementsByClassName('test')[0];
target.setAttribute('data-name', 'test');
console.log(target.hasAttribute('data-name')); // true
target.removeAttribute('data-name');
console.log(target.hasAttribute('data-name')); // false

四、HTML5自定义属性

自定义属性的目的：是为了保存和使用数据，有些数据可以保存到页面中而不用保存到数据库中

自定义属性获取是通过 getAttribute(‘属性’) 方法获取

但是有些自定义属性很容易引起歧义，不容易判断到底是元素内部的属性还是自定义属性

H5中新增了标准

1. 设置H5自定义属性

H5中规定自定义属性需要以 data- 开头做属性名并且赋值

<div data-name="test" ></div>
或者
element.setAttribute('data-name','test');

2. 获取H5自定义属性

1. 兼容性较好的获取方法

   getAttribute(‘属性’)

2. H5新增方法（从IE11才开始支持，兼容性较差）

   element.dataset.属性;

   element.dataset[ ‘属性’ ];

   dataset 可以理解成 集合 的意思，获得所有以 data-开头的 自定义属性，data-开头的自定义属性的集合

<div className="test" data-name="test" data-age="18" data-color="red">test</div>

const target = document.getElementsByClassName('test')[0];
console.log(target.dataset);
console.log(target.dataset.name);
console.log(target.dataset.age);

五、CSS Variables

现在除了在sass、less等预处理工具来实现变量，还可以直接在CSS中使用变量, 以后就可以直接通过js控制css样式

1. 语法

–*来声明变量名，var(–*)来使用

:root{
    --bg-color: red;
    background-color: var(--bg-color);
}

2. js获取与赋值

:root{
     --bg-color: red;
}
 // 获取
getComputedStyle(document.documentElement).getPropertyValue('--bg-color');
 // 赋值
document.documentElement.style.setProperty('--bg-color', 'blue')

3. 其他

1. setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。
2. getComputedStyle方法用于来获取DOM元素实际显示时的样式

<div className="test" style={{ color: 'yellow' }}>test</div>

.colorRed {
  color: red!important;
}

target.style.setProperty('font-size', '20px');

target.setAttribute('class', 'test colorRed');
const style = getComputedStyle(target);

console.log(target.style.color); // yellow
console.log(style.color); // red

六、参考链接

CSS 变量教程-阮一峰