JavaScript 操作元素属性
2019-01-03 13:22
671 查看
1.获取元素方法之一
可以使用内置对象document上的getElementByld方法来获取页面上设置了id属性的元素,获取到的是一个HTML对象,然后将它赋值给一个变量
<div id="div1">hahahah</div>
<script type="text/javascript">
var odiv = document.getElementById('div1'); /*把对象获取的值赋给变量*/ </script> 方法一:页面语句的执行是从上往下,所以要写在元素的下面 方法二:将JavaScript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行 <script type="text/javascript"> window.onload = function(){ var odiv = document.getElementById('div1'); /*把对象获取的值赋给变量*/ } </script> **2.操作元素属性**
获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。
(1)操作属性的方法
" . "
" {} "
属性写法
(1)HTML的属性和js里面属性写法一样
(2)"class"属性写成"className"
(3)"style"属性里面的属性,有横杠的改成驼峰式,比如:"font-size",改成"style.fontSize"
window.onload = function(){
var odiv = document.getElementById('div1'); /把对象获取的值赋给变量/
var div2 = document.getElementById('div2');
var linka = document.getElementById('link');
/读取属性/
var odiv1 = odiv.id
/*写属性*/ odiv.style.color = "red"; linka.href = "http://www.baidu.com"; /*网站要写全*/ div2.className = "box2"; /*class---className font-size---fontSize*/ } </script> <div id="div2" class="box">123</div> <a href="#" id="link">456</a> /*属性用变量操作需要用[]*/ var myStyle = "color"; var myValue = 'red'; linka.style[myStyle] = myValue; **3.innerHTML**
innerHTML可以读取或者写入标签包裹的内容
/读取元素的内容/
var val = odiv.innerHTML;
alert(val);
/*写元素的内容*/ div2.innerHTML = "<a href='http://www.qq.com'>QQ</a>"
相关文章推荐
- Javascript操作CSS之1——获取元素的属性
- javascript根据元素自定义属性获取元素,操作元素
- JavaScript操作DOM元素中的class属性(转载)
- Javascript 操作元素Class属性的问题
- javascript对属性的操作,动态增加元素
- javascript根据元素自定义属性获取元素,操作元素
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
- Javascript操作元素属性方法总结
- 99.Python修炼之路【104-前端-JavaScript操作元素属性】2018.07.25
- javascript中操作元素属性
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
- 用JQuery操作元素的style属性
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- javascript流畅动画效果,包括颜色,style属性,dom元素属性一步搞定
- javascript数组操作总结和属性、方法介绍
- 通过javascript操作CSS3属性实现动画
- jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性11
- [转载 js]JavaScript节点操作DOMDocument属性和方法
- Javascript之内置的DOM操作属性和方法
- javascript操作元素的css样式