js操作符

                      var a = 10;   
            alert("hello");
            console.log("你好");
            document.write("语句");

js操作属性

DOM是为了操作文档(网页)的API,document是它的一个对象
BOM是为了操作浏览器的API,window是它的一个对象
常用BOM对象还有:alert、定时器等

        //整个文档加载完之后执行一个匿名函数
        window.onload = function(){
            document.getElementById('div1').title = "我看到了!";

            //变量oA代表整个a标签
            var oA = document.getElementById('link1');
            oA.href = "http://www.tencent.com";
            oA.title = "跳转到腾讯网"

            alert(oA.id);

js操作style

      window.onload = function() {
          var oDiv = document.getElementById('div1');
          /*style属性中的样式属性,没有"-"号的,写法相同*/
          oDiv.style.color = 'red';
          oDiv.style.background = 'gold';
          /*
          style属性中的样式属性,带"-"号的需要去掉"-"号,写成小驼峰式
              例如:font-size属性要写为fontSize
          */
          oDiv.style.fontSize = '30px';

js操作class属性

     .box01{
         width: 200px;
         height: 200px;
         background-color: gold;
     }
     .box02{
         width: 300px;
         height: 300px;
         background-color: red;
     }
 </style>
 <script type="text/javascript">
     window.onload = function() {
         var oDiv = document.getElementById('div1');
         // 由于class是js中的保留关键字,所以设置class属性时,要写为className
         oDiv.className = 'box02';

js中括号操作符

        window.onload = function(){
            var oDiv = document.getElementById('div1');
            //oDiv.style.color = 'red';//red必须加引号,否则会认为它是一个变量,引起来会认为它是一个值,赋值给=号左边
            var attr = 'color';
            // oDiv.style[attr] = 'red';
            /* 通过[]操作属性可以写变量 */
            oDiv['style'][attr] = 'red';

            /* 通过innerHTML可以读写元素包括的内容 */
            alert(oDiv.innerHTML);//读取标签里面包裹的元素,即“这是一个div元素”

            var oDiv2 = document.getElementById('div2');
            // oDiv2.innerHTML = '这是第二个div元素';//向div标签中插入内容
            oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签

            /*
            document.write和innerHTML的区别
            document.write只能重绘整个页面
            innerHTML可以重绘页面的一部分
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容