前端开发课程
- 操作元素属性

```
              [
```

                    课程介绍
                ](_index_)

```
              [
```

                    html和css入门
                ](001day_index)
        - 
                [
                    html概述及基本结构
                ](001day_section02)

```
              [
```

                    html标签入门
                ](001day_section03)

```
              [
```

                    html布局入门
                ](001day_section04)

```
              [
```

                    css介绍
                ](001day_section05)

```
              [
```

                    css载入方式
                ](001day_section06)

```
              [
```

                    css选择器一
                ](001day_section07)

```
              [
```

                    css元素属性及盒子模型
                ](001day_section08)

```
              [
```

                    css文本属性
                ](001day_section09)

```
              [
```

                    css基本布局演示
                ](001day_section10)

```
              [
```

                    html和css进阶
                ](002day_index)
        - 
                [
                    相对地址与绝对地址
                ](002day_section01)

```
              [
```

                    列表
                ](002day_section02)

```
              [
```

                    表单
                ](002day_section03)

```
              [
```

                    表格
                ](002day_section04)

```
              [
```

                    css选择器二
                ](002day_section05)

```
              [
```

                    css显示特性
                ](002day_section06)

```
              [
```

                    css元素溢出
                ](002day_section07)

```
              [
```

                    html和css高级
                ](003day_index)
        - 
                [
                    定位
                ](003day_section01)

```
              [
```

                    css权重
                ](003day_section02)

```
              [
```

                    photoshop辅助测量与取色
                ](003day_section03)

```
              [
```

                    前端页面开发流程
                ](003day_section04)

```
              [
```

                    javascript入门及进阶
                ](004day_index)
        - 
                [
                    JavaScript介绍
                ](004day_section01)

```
              [
```

                    JavaScript嵌入页面的方式
                ](004day_section02)

```
              [
```

                    变量、数据类型及基本语法规范
                ](004day_section03)

```
              [
```

                    函数
                ](004day_section04)

```
              [
```

                    获取元素方法
                ](004day_section05)

```
              [
```

                    操作元素
                ](004day_section06)

```
              [
```

                    事件属性及匿名函数
                ](004day_section07)

```
              [
```

                    条件语句
                ](004day_section08)

```
              [
```

                    javascript高级
                ](005day_index)
        - 
                [
                    数组及操作方法
                ](005day_section01)

```
              [
```

                    循环语句
                ](005day_section02)

```
              [
```

                    字符串及操作方法
                ](005day_section03)

```
              [
```

                    定时器
                ](005day_section04)

```
              [
```

                    调试程序的方法
                ](005day_section05)

```
              [
```

                    变量作用域
                ](005day_section06)

```
              [
```

                    封闭函数
                ](005day_section07)

```
              [
```

                    JQuery入门
                ](006day_index)
        - 
                [
                    jquery介绍
                ](006day_section01)

```
              [
```

                    jquery文档加载完再执行
                ](006day_section02)

```
              [
```

                    jquery选择器
                ](006day_section03)

```
              [
```

                    jquery样式操作
                ](006day_section04)

```
              [
```

                    绑定click事件
                ](006day_section05)

```
              [
```

                    jquery动画
                ](006day_section06)

```
              [
```

                    JQuery进阶
                ](007day_index)
        - 
                [
                    jquery特殊效果
                ](007day_section01)

```
              [
```

                    jquery链式调用
                ](007day_section02)

```
              [
```

                    jquery属性操作
                ](007day_section03)

```
              [
```

                    jquery事件
                ](007day_section04)

```
              [
```

                    表单验证
                ](007day_section05)

```
              [
```

                    JQuery高级
                ](008day_index)
        - 
                [
                    事件冒泡
                ](008day_section01)

```
              [
```

                    事件委托
                ](008day_section02)

```
              [
```

                    Dom操作
                ](008day_section03)

```
              [
```

                    javascript对象
                ](008day_section04)

```
              [
```

                    json
                ](008day_section05)

```
              [
```

                    ajax
                ](008day_section06)

```
              [
```

                    ES6语法
                ](009day_index)
        - 
                [
                    变量声明和赋值
                ](009day_section01)

```
              [
```

                    函数相关
                ](009day_section02)

```
              [
```

                    模块及面向对象
                ](009day_section03)

```
              [
```

                    异步请求数据
                ](009day_section04)

```
              [
```

                    新增数组操作方法
                ](009day_section05)

```
              [
```

                    react入门和进阶
                ](010day_index)
        - 
                [
                    react介绍
                ](010day_section01)

```
              [
```

                    快速开始
                ](010day_section02)

```
              [
```

                    JSX语法
                ](010day_section03)

```
              [
```

                    组件和属性(props)
                ](010day_section04)

```
              [
```

                    绑定事件
                ](010day_section05)

```
              [
```

                    状态(state)
                ](010day_section06)

```
              [
```

                    列表渲染
                ](010day_section07)

```
              [
```

                    表单数据绑定
                ](010day_section08)

```
              [
```

                    react高级
                ](011day_index)
        - 
                [
                    生命周期方法
                ](011day_section01)

```
              [
```

                    数据交互
                ](011day_section02)

```
              [
```

                    脚手架开发
                ](011day_section03)

          [
              本書使用 GitBook 釋出
          ](https://www.gitbook.com)

前端开发课程

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作元素属性 var 变量 = 元素.属性名读取属性元素.属性名 = 新属性值改写属性

属性名在js中的写法 1、html的属性和js里面属性写法一样2、“class” 属性写成 “className”3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

<script type="text/javascript">
    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>

innerHTML innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
    }
</script>
......
<div id="div1">这是一个div元素</div>