属性的操作包括:读和写

方法:

  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. Oracle 12c 多租户 CDB 与 PDB 备份

    一.  CDB 备份 1.1  只备份CDB 只备份CDB数据库需要具有SYSDBA或SYSBACKUP权限用户连接到CDB的root环境下,执行backupdatabase root命令即可完成对C ...

  2. C++STL库中vector容器常用应用

    #include<iostream> #include<vector> #include<algorithm> using namespace std; int m ...

  3. 微服务理论之五:微服务架构 vs. SOA架构

    一.面向服务的架构SOA 面向服务的架构是一种软件体系结构,应用程序的不同组件通过网络上的通信协议向其他组件提供服务.通信可以是简单的数据传递,也可以是两个或多个服务彼此协调连接.这些独特的服务执行一 ...

  4. TP5隐藏url中的index.php

    在public文件夹下,有个.htacess文件,没有则新建一个, 如果已有这个文件,原文件内容如下: <IfModule mod_rewrite.c> Options +FollowSy ...

  5. 异常:Project configuration is not up-to-date with pom.xml解决方案

    转自:https://www.cnblogs.com/zhujiabin/p/6343423.html 1. Description    Resource    Path    Location   ...

  6. 布尔类型(Boolean)

    布尔类型(Boolean) 布尔类型仅包含真假,与Python不同的是其首字母小写. ==      比较值相等 !=       不等于 ===   比较值和类型相等 !===  不等于 ||   ...

  7. [HDU1711]KMP模板

    解题关键:1.直接套kmp模板即可,注意最后输出的位置,需要在索引的位置+1. 2.next用作数组名在oj中会编译错误, 3.选用g++,只有g++才会接受bits/stdc++.h OJ中g++和 ...

  8. Material使用06 自定义主题、黑夜模式\白天模式切换

    需求: 1 不使用materil依赖内建的主题,使用自己创建的主题 2 利用自己创建的主题实现白天模式和黑夜模式 1 自定义主题 1.1 创建自定义主题文件 them.scss // 引入materi ...

  9. 《精通Spring4.X企业应用开发实战》读后感第七章(AOP概念)

  10. Qt5编译项目出现GL/gl.h:No such file or directory错误

    编译在Ubuntu12.04下安装了Qt5.1.1,在编译工程的时候出现了如下错误:“GL/gl.h:No such file or directory”,查了一下资料发现这个问题由于系统中没有安装O ...