JS——操作元素属性
属性的操作包括:读和写
方法:
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——操作元素属性的更多相关文章
- vue.js操作元素属性
vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...
- 3 、操作元素 (属性 CSS 和 文档处理)
3 操作元素-属性 CSS 和 文档处理 3.1 属性操作 $("p").text() $("p").html() $(":check ...
- 003——VUE操作元素属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用jQuery操作元素属性
在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...
- JS获取元素属性和自定义属性
获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...
- Javascript操作元素属性方法总结
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript 操作元素属性的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- dom操作------操作元素属性的若干方法
// 1,通过HTMLElement类型的属性来获得和设置元素特性(设置的是元素属性,比如class,id,title,而不是css样式,比如float,border等)let div = docum ...
- js操作元素导致元素错位和大小改变
使用js循环的方式批量控制元素的大小时结果往往不尽如人意. 我总结了一条规律 在一个循环体内不可以同时存在一下两种操作,否则容易导致元素错位或大小改变: 1.对元素的offsetWidth.offse ...
随机推荐
- 快速排序的JavaScript实现
思想 分治的思想,将原始数组分为较小的数组(但没有像归并排序一样将它们分隔开). 主元选择: 从数组中任意选择一项作为主元,通常为数组的第一项,即arr[i]:或数组的中间项, arr[Math.fl ...
- UILabel常见用法
//创建一个UILabel UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(50 , 100 , 200 , 560)]; // ...
- 利用SharedRegion实现核间共享
导入SharedRegion模块 SharedRegion模块是一个共享区域,特别是对于多处理器环境下,SharedRegion模块就是用于让一个内存区域能被不同处理器共享并操作.这个模块会给每个处理 ...
- 弱网测试--使用fiddle进行弱网测试
数据源于:http://blog.csdn.net/eleven521/article/details/19089671 弱网测试原理以及方法(一)一.为什么要进行弱网测试?按照移动特性,各种网络连接 ...
- 华为USG6320做双线-基于源地址的策略路由
通过配置策略路由实现不同源地址数据通过不同的链路转发. 组网需求 某企业公司拉了两条电信的光纤,分别为静态光纤和拨号光纤,前者主要用于服务器,后者则用于一般办公. 需求如下: 静态光纤:服务器专用 拨 ...
- [原创]Javascript 利用mousetrap.js进行键盘事件操作
我们日常开发中,会遇到js的键盘操作,例如回车提交表单之类的.或者按下某个键执行某个方法.无意中发现一个大小不到4K的js文件,它非常方便的操作键盘事件. 自己也尝试了一下:具体代码如下: 详情可以去 ...
- Spring入门第五课
集合属性 在Spring中可以通过一组内置的xml标签(如:<list>,<set>,<map>)来配置集合属性. 配置java.util.List类型的属性,需要 ...
- raspberry是个什么玩意
今天Wilson同学取回一个书本大小的包裹,说买回来一台小电脑,只有信用卡大小! 这是第一次听说和看见raspberry Pi. 一块开发板上有四个USB.一个视频接口.一个音频接口.一个网线接口和电 ...
- HTML5程序开发范例宝典 完整版 (韩旭等著) 中文pdf扫描版
HTML5程序开发范例宝典紧密围绕编程者在编程中遇到的实际问题和开发中应该掌握的技术,全面介绍了利用HTML进行程序开发的各方面技术和技巧.全书共16章,内容包括HTML网页布局.HTML基本元素.H ...
- DATASET()用法
DataSet是ADO.NET的中心概念.可以把DataSet当成内存中的数据库,DataSet是不依赖于数据库的独立数据集合.所谓独立,就是说,即使断开数据链路,或者关闭数据库,DataSet依然是 ...