属性操作语法

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

元素.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. 【HDOJ】1890 Robotic Sort

    伸展树伤不起啊,很容易wa,很容易T,很容易M. /* 1890 */ #include <iostream> #include <string> #include <m ...

  2. WebView loadData出错(奇怪的设计)

    今天遇到一个奇怪的问题. 我使用WebView加载一个网页.  方法1. 直接使用 loadUrl() 方法,没有问题.完全可以.方法2. 使用loadData()方法,出现问题,无法显示.方法3. ...

  3. （转载）Linux下IPTABLES防火墙的设定

    (转载)http://www.jefflei.com/post/1760.html 1.iptables防火墙启动和停止 启动iptables防火墙时命令行输入 #service iptables s ...

  4. C#后台执行bat

    C#后台执行bat ProcessStartInfo p = new ProcessStartInfo(); p.FileName = "C:\\1.bat"; p.WindowS ...

  5. 如何避免jQuery库和其他库的冲突

    默认情形:jQuery用$作为自身的快捷方式 1. jQuery库在其他库之后导入 (1)方法:使用jQuery.noConflict()函数将变量$的控制权转移给其他库 (2)操作: (a)在js代 ...

  6. ubuntu中为hive配置远程MYSQL database

    一.安装mysql $ sudo apt-get install mysql-server 启动守护进程 $ sudo service mysql start 二.配置mysql服务与连接器 1.安装 ...

  7. javascript 和jqurry详解

    javascript写的图表库,收费 highcharts jqurry有两个图标函数不收费,好用 Flot.PlotKit与MochiKit 官网下载 http://www.flotcharts.o ...

  8. Kruskal算法构造最小生成树

    Kruskal算法来构造最小生成树,我总结了分为以下步骤: (1)建图,构造Kruskal边集,边集元素应该包括该边的起始顶点.终止顶点.权值: (2)将边集按权值从小到大的顺序进行排序: (3)从小 ...

  9. [置顶] 分析Java死锁:分析jstack日志

    本文中我将展示一段垃圾代码,这段代码会产生死锁,这样围绕这段代码重点展示三种不同的方法来分析线程日志,从而得知什么地方有问题. 下面的讨论将用到两个类 Account 和 DeadlockDemo c ...

  10. 中文字符串的编码转换(c实现)

    中文字符串在c/c++中表示为字节序列,在分词的时候需要根据不同的编码方式进行分词,一般分词器需要转换成统一的编码方式再进行转换,有些分词器如ICTCLAS在分词的时候可以不显示定义编码方式,可以检测 ...