属性的操作包括:读和写

方法:

  1)”.“操作

  2)”[ ]“操作

eg:

var oDiv = document.getElementById('div1');

var attr = 'color';

//这里的attr是变量,使用时要用[attr],而不是.attr

oDiv.style[attr] = 'red';

属性写法:

  1)html属性和js属性写法相同。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 这个函数的作用是:当整个文档加载完成之后,再执行{}中的内容
window.onload = function () {
var oA = document.getElementById('link1');
//“写”操作
document.getElementById('div1').title = '我看到了!';
oA.href = 'http://www.baidu.com';
oA.title = '去百度网';
//“读”操作
alert(oA.id)
}
</script>
</head>
<body>
<div id="div1" class="div1" style="color:red" title="div元素,你看到了吗">
这是div元素
</div>
<a href="#" id="link1">百度</a>
</body>
</html>

  2)”class“属性写成”className“,因为class在js中是一个关键字。

  3)”style“属性里面的属性,font-size这种带-的,要变为fontSize

  innerHTML:

  通过innerHTML可以读写元素包括的内容。eg:alert(oDiv.innerHTML);oDiv2.innerHTML = "<a href="http://www.baidu.com">百度</a>"

JS——操作元素属性的更多相关文章

  1. vue.js操作元素属性

    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...

  2. 3 、操作元素 (属性 CSS 和 文档处理)

    3   操作元素-属性 CSS 和 文档处理  3.1 属性操作 $("p").text()    $("p").html()   $(":check ...

  3. 003——VUE操作元素属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 使用jQuery操作元素属性

    在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...

  5. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

  6. Javascript操作元素属性方法总结

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. javascript 操作元素属性的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. dom操作------操作元素属性的若干方法

    // 1,通过HTMLElement类型的属性来获得和设置元素特性(设置的是元素属性,比如class,id,title,而不是css样式,比如float,border等)let div = docum ...

  9. js操作元素导致元素错位和大小改变

    使用js循环的方式批量控制元素的大小时结果往往不尽如人意. 我总结了一条规律 在一个循环体内不可以同时存在一下两种操作,否则容易导致元素错位或大小改变: 1.对元素的offsetWidth.offse ...

随机推荐

  1. 原来问题在这里-我的memory leak诊断历程

    自从公司开始将java作为主要开发语言后,C++与java的混合应用日趋增多. java与C++的通信主要也是使用JNI来完成,这并没有什么问题.对于这样的混合应用项目来说,最大的噩梦莫过于memor ...

  2. nodejs 静态文件服务器

    https://cnodejs.org/topic/4f16442ccae1f4aa27001071 http://blog.csdn.net/zhangxin09/article/details/8 ...

  3. 【转】 Pro Android学习笔记(四十):Fragment(5):适应不同屏幕或排版

    目录(?)[-] 设置横排和竖排的不同排版风格 改写代码 对于fragment,经常涉及不同屏幕尺寸和不同的排版风格.我们在基础小例子上做一下改动,在横排的时候,仍是现实左右两个fragment,在竖 ...

  4. python 链表

    在C/C++中,通常采用“指针+结构体”来实现链表:而在Python中,则可以采用“引用+类”来实现链表. 节点类: class Node: def __init__(self, data): sel ...

  5. JavaScript接口

    JavaScript中实现接口的方法有三种: 第一种,使用注释的方法实现接口 特点:(1)最简单,但是功能最弱(2)利用 interface和 implement"文字"(3)把他 ...

  6. day01_虚拟机与主机之间ip配置

       虚拟机1: centos_ node1 虚拟机2:centos_node2 宿主主机虚拟机ip配置: vmnet1 来自为知笔记(Wiz)

  7. 利用Ssocks访问国外网站(yutube/google等)

    ***开源项目:https://github.com/***/ 本例使用的是针对windows系统的c-sharp版本:https://github.com/***/***-windows 运行*** ...

  8. [dp]最长单调递增子序列LIS

    https://www.51nod.com/tutorial/course.html#!courseId=12 解题关键: 如果将子序列按照长度由短到长排列,将他们的最大元素放在一起,形成新序列$B\ ...

  9. 六种获取配置properties文件的方法

    总结一下六种获取配置properties文件的方法,代码如下: package com.xujingyang.test ; import java.io.BufferedInputStream ; i ...

  10. Learning Python 004 基础的数据类型和变量

    Python 基础的数据类型和变量 数据类型 整数 Python可以处理任意大小的整数,当然包括负整数. Python表示十六进制也用0x前缀. 浮点数 1.23x10^9和12.3x10^8是完全相 ...