属性操作语法

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

元素.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实战之你应该使用哪个网络库？

    前言 目前基本上每个应用都会使用HTTP/HTTPS协议来作为主要的传输协议来传输数据.即使你没有直接使用HTTP协议,也会有成堆的SDK会包含这些协议,譬如分析.Crash反馈等等.当然,目前也有很 ...

  2. Linux搭建SVN 服务器

    Linux搭建SVN 服务器 1          安装SVN 2          使用客户端连接 2.1       使用windows的客户端 2.2       使用Linux下的命令行 3  ...

  3. String.format 细节

    String.format(Locale.US, format, args); format 参数 如果有% 那么%后面必须跟一个合法的字符,否则崩溃, 因为在String.format中 %为特殊字 ...

  4. javascript外部使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. BZOJ2038小Z的袜子(hose)

    2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 2343  Solved: 1077[Subm ...

  6. zoj 3620 Escape Time II

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4744 Escape Time II Time Limit: 2 Seconds ...

  7. TeamViewer 远程时出现：现在无法捕捉画面。这可能是由于恰的用户切换或远程桌面会话断开、最小化

    关掉远程访问主机的TeamViewer ,再重新打开软件

  8. ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender

    (原文) 昨天在ASP.NET MVC利用PagedList分页(一)的 最后一节提到,一个好的用户体验绝对不可能是点击下一页后刷新页面,所以今天来说说利用Ajax+PagedList实现无刷新(个人 ...

  9. poj 3304 Segments（计算几何基础）

      Segments Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11593   Accepted: 3657 Descr ...

  10. Android 自定义View可拖动移动位置及边缘拉伸放大缩小

    一.首先说一下定义这样一个View有什么用?在一些app中,需要设置头像,而用户选择的图片可能是使用摄像头拍摄,也可能是选择的相册里面的图片,总之,这样的图片大小不一,就比如在使用某个聊天软件的时候, ...