属性操作语法

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

元素.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. while +next 循环 回到循环顶端

    my $show_tip = 1; sub login { while (1) { my $api ="https://login.weixin.qq.com/cgi-bin/mmwebwx ...

  2. 【HDOJ】2149 Public Sale

    看Discuss说是博弈论,没学到这个分类.不过仔细想了想,发现.如果m<=n,那么可能结果为m,m+1...n.否则,如果m%(n+1) == 0,那么无论如何都会输,因为无论先报价什么数,如 ...

  3. Learning WCF Chapter2 Messaging Protocols

    In Chapter 1,you were introduced to fundamental WCF concepts,      在章节1中,学习了wcf中的基础概念including how t ...

  4. 【转】Xcode7.1环境下上架iOS App到AppStore 流程 (Part 二)

    原文网址:http://www.cnblogs.com/ChinaKingKong/p/4964549.html 前言部分 part二部分主要讲解 iOS App IDs 的创建.概要文件的配置.以及 ...

  5. （转载）Linux下IPTABLES配置详解

    (转载)http://www.cnblogs.com/JemBai/archive/2009/03/19/1416364.html 如果你的IPTABLES基础知识还不了解,建议先去看看. 开始配置 ...

  6. 转载--C语言运算符优先级和口诀

    转载:http://www.cnblogs.com/zhanglong0426/archive/2010/10/06/1844700.html 一共有十五个优先级: 1   ()  []  .  -& ...

  7. linux命令 cp 递归复制 带权限复制

    cp -r 递归复制源目录下所有文件及子目录 到 目标目录或文件 cp -p 把源文件或目录下的所具有的权限一同复制 到 目标目录或文件

  8. 常用开源GIS项目

    常用开源GIS项目     常用开源桌面GIS软件 QGIS 始于2002年5月,算得上是开源GIS平台中的后起之秀.界面友好,分析功能可与GRASS GIS相媲美.主页:http://www.qgi ...

  9. Java基础（二十三）GUI图形界面编程(Java基础完)

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  10. java基础（十九）IO流（二）

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...