操作属性与样式

操作属性与样式

操作属性
1> 读取属性的值
2> 设置属性的值
在 DOM 观点中, 页面中的每一个标签都是 对象, 所以
我们要读取元素的属性时, 直接就是 读取 对象的 属性
我们要设置元素的属性时, 直接就是 给对象的属性 赋值

-> 操作类样式使用的是 className, 而不是 class. 因为 class 是一个关键字.

操纵属性

// 设置宽高的方法有三种
// 1> img 标签自有的属性 width 与 height
// 2> 设置 img 的行内样式, 即 img 标签的 style 属性中的 width 与 height
// 3> 使用 类样式, 外部样式, 嵌入样式

1 img.width = ‘500’ 使用 html 的属性的时候设置宽高默认就是像素
2 img.style.width = ‘500px’;
3 img.className = ‘c’;
.c {
width: 200px;
}

DOM对象.style.样式属性名 = 样式属性值

设置图片地址 :
var imgobj = document.getElementsByTagName( 'img' )[ 0 ];
imgobj.src = './imgs/1.png';

操纵类名

操作类样式使用的是 className, 而不是 class. 因为 class 是一个关键字.

几个特殊的属性

• .innerText

• 表示标签内部的文本
  其与 innerHTML 的区别是
  1> 读取的时候忽略标签
  2> 设置的时候 标签形式的字符串不会被转换成 DOM, 而是转义( 例如: > > )

• .innerHTML

• inner 表示的是内部的, 与之对应的有一个 outer 叫外部的
  innerHTML 内部的 html

  这个属性的作用是读取或设置标签中的 内容( 子标签等 )
  

处理行内样式

样式的分类:
1> 行内样式: 直接写在标签中的样式

2> 嵌入样式: 写在页面的 style 标签中的样式, 一般使用的是选择器来定位元素
3> 外部样式: 独立的利用一个 css 文件写到外面, 然后利用 link 标签引入 css

        专一原则, 就近原则
    标签的行内样式写到一个 style 属性中( 注意这个属性是一个很长的字符串 )
    对应的 DOM 对象, 也有一个 style 属性. 

    但是 DOM 对象的 style 属性不是一个字符串. DOM 的 style 属性也是一个对象,
    这个对象就是 样式属性名 与 样式属性值 构成的键值对.

    DOM对象.style.样式属性名 = 样式属性值

非行内样式-样式操作

style 只能处理行内样式, 无法处理嵌入样式
如果第一次获取元素的样式值的时候, 样式不是行内样式, 是写在外部的, 就无法使用 style 获取
应该使用 “计算样式”
window.getComputedStyle( 元素 )
该方法会返回这个元素的 所有 计算样式的 对象
其使用方法与 style 属性的使用方法是一模一样的( 只读 ).

    var left = box.style.left || window.getComputedStyle( box ).left;

    function func( arg ) {
        // 对参数进行操作
        // 加入我们需要的参数是一个数组
        arg = arg || [];  
        // 如果传入数组了, 那么这句话无效, 如果没有传入参数则使用 [] 给 arg 赋值
        // ...

    }


利用标准 DOM 的方式创建 页面中的 元素
思路: 将写 html 标签的顺序改成代码的顺序即可