属性操作语法

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

元素.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. 带控制端的逻辑运算电路_分别完成正整数的平方、立方和阶乘的运算verilog语言

    练习:设计一个带控制端的逻辑运算电路,分别完成正整数的平方.立方和阶乘的运算. //--------------myfunction---------- modulemyfunction(clk,n, ...

  2. BlockingQueue-线程的阻塞队列

    BlockingQueue作为线程容器,可以为线程同步提供有力的保障,其主要用到的方法包括: add(E o); //将指定的元素添加到此队列中(如果立即可行),在成功时返回 true,其他情况则抛出 ...

  3. BZOJ_1507_Editor_[NOI2003]_(Splay)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1507 简单区间操作的模板题 1507: [NOI2003]Editor Time Limit: ...

  4. easyui datagrid pagesize设置无效

  5. Android4.0 -- UI控件之 Menu 菜单的的使用(二)

    上一讲我们讲解了android中在代码或者xml文件中定义菜单,这一讲我们继续来讲解一下定义菜单的其他方式:创建上下文的菜单.查看API文档 Menus :Creating Contextual Me ...

  6. android webview js交互 第一节 （java和js交互）

    转载请注明出处         挺帅的移动开发专栏  http://blog.csdn.net/wangtingshuai/article/details/8631835        在androi ...

  7. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5

    文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:s ...

  8. jQuery技术内幕预览版.pdf2

    第二章 构造jQuery对象 jQuery对象是一个类数组对象,含有连续的整型属性.length属性和大量的jQuery方法,$()是jQuery()的缩写 构造函数jQuery() 如果调用构造函数 ...

  9. 一步一步写一个简单通用的makefile(一)

    经常会用写一些小的程序有的是作为测试,但是每次都需要写一些简单的GCC 命令,有的时候移植一些项目中的部分代码到小程序里面进行测试,这个时候GCC 命令并不好些,如果写啦一个比较常用的makefile ...

  10. 研磨设计模式解析及python代码实现——(二)外观模式(Facade)

    一.外观模式定义 为子系统中的一组接口提供一个一致的界面,使得此子系统更加容易使用. 二.书中python代码实现 class AModuleApi: def testA(self): pass cl ...