HTML属性操作
属性名 属性值
相关操作：读与取
一、属性读操作：元素.属性，其实在就是找到等号右边的值
代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="text">
<select name="" id="select">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="hz">杭州</option>
</select>
<input type="button" value="按钮" id="button">
</body>
<script>
function $(id) {
return document.getElementById(id);
}
$('button').onclick=function(){
var a=$('text').value+'在'+$('select').value;
alert(a)
}
</script>
</html>
二、属性写操作：("添加")替换、修改
元素.属性名=新的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="text">
<select name="" id="select">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="hz">杭州</option>
</select>
<input type="button" value="按钮" id="button">
</body>
<script>
function $(id) {
return document.getElementById(id);
}
$('button').onclick=function(){
$('button').value='button';//button的值原为按钮，将其修改为button
$('text').value="老朋友";//原先text的值为空，其实是把空值修改为有值
}
</script>
</html>
三、innerHTML 读取元素内的所有HTML元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮" id="button">
<p id="content">这是一段文字</p>
</body>
<script>
function $(id) {
return document.getElementById(id);
}
$('button').onclick=function(){
var a=$('content').innerHTML;
alert(a)
}
</script>
</html>
动态添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="text">
<input type="button" value="按钮" id="button">
<p id="content"></p>
</body>
<script>
function $(id) {
return document.getElementById(id);
}
$('button').onclick=function(){ $('content').innerHTML=$('text').value;//将写入文本框的内容，动态添加到P标签中
}
</script>
</html>
同样，写可以插入图片
插入按钮
练习：input中输入文字内容，可以在文本框中显示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 300px;
margin: 200px auto;
height: 200px;
}
#content{
border: 1px solid #000;
height: 200px;
}
#submit{
margin-left: 30px;
}
</style>
</head>
<body>
<div id="box">
<div id="content"></div>
<span id="name">主人：</span><input type="text" id="text"><input type="button" id="submit" value="提交">
</div>
</body>
<script>
function $(id){
return document.getElementById(id);
}
window.onload=function () {
$('submit').onclick=function(){
$('content').innerHTML+=$('name').innerHTML+$('text').value+'<br />';//这边有一个值得注意的：span是没有value属性的，只有表单元素具有value属性
$('text').value='';
}
}
</script>
</html>
四、属性操作注意事项
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> input{
cursor: pointer;
}
.red{
color: red;
width: 300px;
background-color: yellow;
}
.blue{
color: yellow;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<input type="button" value="+" id="add">
<input type="button" value="-" id="duce">
<input type="button" value="红" id="red" >
<input type="button" value="蓝" id="blue">
<p id="introduce" >钉钉(DingTalk)-由阿里巴巴集团开发,免费提供给所有中国企业用于商务沟通和工作协同!钉钉-中国领先的智能移动办公平台!</p>
</div>
</body>
<script>
function $(id) {
return document.getElementById(id);
}
var num=15;
$('add').onclick=function(){
num++;
$('introduce').style.fontSize=num+'px';//JS中不允许出现'-'，所以font-size应该写成fontSize
}
$('duce').onclick=function(){
num--;
$('introduce').style.fontSize=num+'px';
}
$('red').onclick=function(){
$('introduce').className='red';//注意：给一个元素动态添加类，不是class，而是className
}
$('blue').onclick=function(){
$('introduce').className='blue';
}
</script>
</html>
2.控制元素浮动
如果想要修改float属性，得注意IE（styleFloat）、非IE（cssFloat）（浏览器的兼容问题）
即写成
更好的方法是：写一个类，在类里写上浮动样式，修改类即可。
3.想要实现一个效果：
有一个div框，在第一个text输入框中输入修改的属性，第二个输入值，则div框就会相应的被修改
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
border:1px solid black;
background-color: ;
}
</style>
</head>
<body>
输入想要修改的属性：<input type="text" id="attr"></br>
输入修改属性的值：<input type="text" id="val"></br>
<input type="button" value="按钮" id="btn">
<div id="box"></div>
</body>
<script>
function $(id) {
return document.getElementById(id);
}
$('btn').onclick=function(){
$('box').style[$('attr').value]=$('val').value;//此处注意：要修改box的style，属性值可以通过value直接拿到，并且是个定值。但是，一个div的属性有很多种，可以是宽 高 背景色等等，是变化的，所以不能直接写定值。也不可以写成$('box').style.$('attr').value，因为'.'后面接的不应该是变量
}
</script>
</html>
在JS中，允许将'.'替换成'[]'，即将点替换成中括号，并且不存在浏览器的兼容性问题。'.'后面的值无法修改，'[]'里面的值可以随便写。
HTML属性操作的更多相关文章
- 了解JavaScript 对象的属性操作
提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- jQuery-1.9.1源码分析系列（八） 属性操作
jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removePro ...
- jQuery属性操作
jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...
- 利用@property实现可控的属性操作
利用@property实现可控的属性操作 Python中没有访问控制符, 不像java之类的 public class Person{ private int x public int getAge( ...
- js学习笔记2---HTML属性操作
1.HTML属性操作:读.写 属性名 属性值 2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
- jquery学习--属性操作
学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...
- 第二十一课：js属性操作的兼容性问题
上一课主要讲了属性的概念,用法,固有属性和自定义属性的区别,class属性操作的方法等,这一课主要讲一些有关属性操作的兼容性问题. IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径,比如 ...
- C# 反射之属性操作
一.反射-类操作 //1.获取对象所有的属性名 Student stu = new Student(); //获取当前类名称 Console.WriteLine(stu.GetType().Name) ...
随机推荐
- 最简单的SAP云平台开发教程 - 如何开发UI5应用并运行在SAP云平台上
选择Services Catalog,根据关键字搜索到WebIDE服务,点击超链接打开WebIDE: 进入workspace,选择Git->Clone Repository: 从我的github ...
- IO 理论 SOCK理论
IO密集型程序 在程序执行过程中存在大量IO操作,而CPU操作较少,消耗CPU较少,运行效率较低CPU(计算)密集型程序 在程序执行中,CPU运算较多,IO操作相对较少(消耗CPU大,运行速度快)IO ...
- 玩转springcloud（三）：服务的提供者与调用者（注册于发现）
一.简介 上文我们实践了cloud的注册中心的单服务于多节点的搭建,房子造好了得有人来住不是,这篇我们实践下服务提供者于调用者的案例,也就是服务端和客户端的调用. 本文会设计三个module:注册中心 ...
- Django：中间件与csrf
一.中间件 什么是中间件 中间件有什么用 自定义中间件 中间件应用场景 二.csrf csrf token跨站请求伪造 一.中间件 什么是中间件 中间件顾名思义,是介于request与response ...
- 生成器(generator) 详解
1. 生成器是什么? 利用迭代器,我们可以在每次迭代获取数据(通过next()方法)时按照特定的规律进行生成.但是我们在实现一个迭代器时,关于当前迭代到的状态需要我们自己记录,进而才能根据当前状态生成 ...
- Tomcat下配置JNDI的三种方式
最近在整理项目上的配置文件,正好看到了数据源配置,想着配置方式有多种,便趁热打铁,记录下常规的Tomcat配置数据源的方式 1.单个工程配置 找到Tomcat下的server.xml文件,在Conte ...
- 【洛谷P4430】小猴打架
题目大意:求带标号 N 个点的生成树个数,两棵生成树相同当且仅当两棵树结构相同且边的生成顺序相同. 题解:学会了 prufer 序列. prufer 序列是用来表示带标号的无根树的序列. 每种不同类型 ...
- [唐胡璐]Selenium技巧- 抓图并保存到TestNG报告中
这里不讲解怎么在Eclipse安装配置TestNG，网上一搜一大把，大家自己去实践一下。 在这里主要说一下用Java来实现Selenium Webdriver的截图功能和把截图写到TestNG的报告中 ...
- jvm crash分析
问题描述:线上进程异常退出,查看服务器端日志,有jvm crash文件生成 # # A fatal error has been detected by the Java Runtime Enviro ...
- Educational Codeforces Round 33 (Rated for Div. 2) A题
A. Chess For Three Alex, Bob and Carl will soon participate in a team chess tournament. Since they a ...