属性的操作包括:读和写

方法:

  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. 恢复到特定点(时间点、scn、日志序列号),rman不完全恢复

    将数据库.表空间.数据文件等恢复至恢复备份集保存时间中的任何一个时间点/SCN/日志序列(一般是日志挖掘找到误操作点),但须谨慎,操作前一定需要做好备份,具备条件的情况下最好先恢复到异机,避免业务停机 ...

  2. bzoj 1185 最小矩形覆盖 —— 旋转卡壳

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1185 枚举一条边,维护上.左.右方的点: 上方点到这条边距离最远,所以用叉积求面积维护: 左 ...

  3. UDK编辑器 49条小提示

    转自:http://www.cnblogs.com/hmxp8/archive/2012/02/09/2343674.html Very Helpful~ 01. First time using t ...

  4. JVM类加载(3)—初始化

    3.初始化 在准备阶段,变量已经赋过一次系统要求的初始值,而在初始化阶段,则根据程序员通过程序制定的主观计划去初始化类变量(静态变量)和其他资源,或者从另外一个角度表达:初始化过程是执行类构造器< ...

  5. wdatePicker时间控件的使用

    wdatePicker时间控件的使用 1.引用wdatePicker控件的js <seript src="../../js/My97DatePicker/wdatePicker.js& ...

  6. numpy.ones_like(a, dtype=None, order='K', subok=True)返回和原矩阵一样形状的1矩阵

    Return an array of ones with the same shape and type as a given array. Parameters: a : array_like Th ...

  7. union联合体学习

    union,中文名“联合体.共用体”,在某种程度上类似结构体struct的一种数据结构,共用体(union)和结构体(struct)同样可以包含很多种数据类型和变量. 不过区别也挺明显: 结构体(st ...

  8. lyui 列表 上传

    1.js layui.use(['table', 'element', 'laydate', 'layer','upload'], function () { var table = layui.ta ...

  9. RStudio版本管理 整合Git

    本文为原创,转载注明出处. 系统环境: win7 x64 R-3.1.0-win.exe RStudio-0.98.507.exe 前置条件:必须拥有github仓库: 如:https://githu ...

  10. 【Qt官方例程学习笔记】Application Example(构成界面/QAction/退出时询问保存/用户偏好载入和保存/文本文件的载入和保存/QCommandLineParser解析运行参数)

    The Application example shows how to implement a standard GUI application with menus, toolbars, and ...