属性操作语法

读操作：获取、找到
元素.属性名
写操作：“添加”、替换、修改
元素.属性名 = 新的值

元素.innerHTML => 读取元素里面所有的html代码

元素.innerHTML = 123; => 替换元素里面所有的html代码

实例：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

window.onload = function (){

    var oBtn = document.getElementById('btn1');

    var oText = document.getElementById('text1');

    var oSelect = document.getElementById('select1');

    var oImg = document.getElementById('img1');

    var oP = document.getElementById('p1');

    oBtn.onclick = function (){

        // alert(oBtn.value);        // '按钮'

        // alert( oText.value );

        // alert( oSelect.value );

        

        // 字符串连接

        // oText.value    oSelect.value

        // '刘伟' +  '北京'     =>    '刘伟北京'

        // '刘伟' + '在' + '北京'     =>    '刘伟在北京'

        

        alert(oText.value + ' 在 ' + oSelect.value);

            

        oText.value = oSelect.value;

        oImg.src = oText.value;

        oP.innerHTML = oText.value;

    };

};

</script>

</head>

<body>

<input id="text1" type="text" />

<select id="select1">

    <option value="北京">北京</option>

    <option value="上海">上海</option>

    <option value="杭州">杭州</option>

</select>

<input id="btn1" type="button" value="按钮" />

<p id="p1">这是一些文字</p>

<img id="img1" src="img/1.jpg" width="" />

</body>

</html>
属性操作的注意事项

JS中不允许出现的特殊字符

不许出现"-",如：font-weight应为fontWeight

给元素添加class
行间样式与className

关键字、保留字

实例：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>替换皮肤

</title>

<script>

var oBtn1=document.getElementById('btn1');

var oBtn2=document.getElementById('btn2');

var oP=document.getElementById('p1'); 

oBtn1.onclick=function(){

 oP.className='red';

};

oBtn2.onclick=function(){

 oP.className='yellow';

} 

</script>

<style>

.red { width:400px; border:10px solid #; background:red; padding:20px; color:yellow; }

.yellow { width:500px; border:5px solid #; background:yellow; padding:10px; color:red; }

</style>

</head>

<body>

<input id="btn1" type="button" value="红" />

<input id="btn2" type="button" value="黄" />

<p id="p1">what are you doing?</p>

</body>

</html>

相对路径的读取问题

所有的相对路径地址，颜色值 均不能作为判断条件

表单元素的type值修改

IE6、IE7、IE8不兼容

float的兼容性问题

IE（styleFloat）、非IE（cssFloat）

实例：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

window.onload=function(){

var oFD=document.getElementById("fudong");

var Obtn=document.getElementById("btn");

Obtn.onclick=function(){

oFD.style.float='right';  //会报错

oFD.style.styleFloat='right'; //IE

oFD.style.cssFloat='right';  //非IE

};

}

</script>

</head>

<body>

<input type="botton" id="btn"/>

<div id="fudong"></div>

</body>

</html>
属性操作中的：[]

实例：任意修改DIV的值

判断

if(){} 在做这事之前，有个条件
if(){}else{} 2件事，根据条件，选一个来做
if(){}else if(){}else if(){}else if(){}
if(){}else if(){}else if(){}else if(){}else{}

JS1-属性操作的更多相关文章

  1. 了解JavaScript 对象的属性操作

    提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...

  2. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  3. jQuery-1.9.1源码分析系列（八） 属性操作

    jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removePro ...

  4. jQuery属性操作

    jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...

  5. 利用@property实现可控的属性操作

    利用@property实现可控的属性操作 Python中没有访问控制符, 不像java之类的 public class Person{ private int x public int getAge( ...

  6. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  7. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  8. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  9. 第二十一课：js属性操作的兼容性问题

    上一课主要讲了属性的概念,用法,固有属性和自定义属性的区别,class属性操作的方法等,这一课主要讲一些有关属性操作的兼容性问题. IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径,比如 ...

  10. C# 反射之属性操作

    一.反射-类操作 //1.获取对象所有的属性名 Student stu = new Student(); //获取当前类名称 Console.WriteLine(stu.GetType().Name) ...

随机推荐

  1. Android 获取SDCard上图片和视频的缩略图

    获取图片缩略图和视频缩略图的方法: Java代码: import java.io.File; import android.app.Activity; import android.graphics. ...

  2. 转载：MyEclipse中防止代码格式化时出现换行的情况的设置

     转载出处:http://www.cnblogs.com/yjhrem/articles/2310013.html 编辑完成代码,用MyEclipse的代码格式化后,本来不长的代码也被自动转成了多行. ...

  3. HDU 5950 Recursive sequence 【递推+矩阵快速幂】 (2016ACM/ICPC亚洲区沈阳站)

    Recursive sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  4. bzoj 1513 [POI2006]Tet-Tetris 3D（二维线段树）

    1513: [POI2006]Tet-Tetris 3D Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 540  Solved: 175[Submit ...

  5. UVa 10054 The Necklace BFS+建模欧拉回路

    算法指南 主要就是建立欧拉回路 #include <stdio.h> #include <string.h> #include <iostream> #includ ...

  6. Bzoj 2252: [2010Beijing wc]矩阵距离 广搜

    2252: [2010Beijing wc]矩阵距离 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 563  Solved: 274[Submit][ ...

  7. windows上zend server安装 报The server encountered an internal error or misconfiguration and was unable to complete your request -解决方法 摘自网络

    windows上zend server安装完成后报如下错误:   Internal Server Error The server encountered an internal error or m ...

  8. Spark RDD/Core 编程 API入门系列之动手实战和调试Spark文件操作、动手实战操作搜狗日志文件、搜狗日志文件深入实战（二）

    1.动手实战和调试Spark文件操作 这里,我以指定executor-memory参数的方式,启动spark-shell. 启动hadoop集群 spark@SparkSingleNode:/usr/ ...

  9. 武汉Uber优步司机奖励政策（2月1日~2月7日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. LIS，LDS的另类算法（原）

    自己在做有关俄罗斯套娃的题目时,发现自己写出的一个方法可以解决求最长上升子序列(LIS)和最长下降子序列(LDS)的问题. 俄罗斯套娃:这个问题在前一篇中讲的有,在此处就不多讲了~链接  求最长上升子 ...