通过JavaScript来操作CSS

最新推荐文章于 2023-11-08 23:32:38 发布

zyg238940

最新推荐文章于 2023-11-08 23:32:38 发布

阅读量186

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/zyg238940/article/details/108087620

版权

通过JavaScript来操作CSS

通过style属性来修改CSS

CSS的优先级：内联样式>Id选择器>类选择器>标签选择器

格式：标签对象.style.CSS属性=“值”;

注意：在JS中CSS属性的写法与CSS中属性的写法不一样

CSS中属性的多个单词使用 - 隔开

JS中使用驼峰命名法：去除小横线，第二个单词首字母大写（一个单词的不变）
如： CSS JS
font-size fontSize
font-weight fontWeight

通过class属性来重置选择器（个人觉得更适用于bootstrap中）

格式：
标签对象.className=“类选择器1 类选择器2”; （注意：用空格隔开）
对象标签.Id=“id选择器”;

JS中的内置对象

DOM Document对象( document也是window的属性)
document 表示整个HTML网页文档

document.body.clintWidth           body标签的宽度
（也可以写成  window.document.body.clintWidth）

document.body.clintHeight          body标签的高度

BOM Browser对象
window 对象表示整个浏览器的窗口

属性：
 window.innerWidth      浏览器的内部宽度
 window.innerHeight     浏览器的内部高度（不包含标题栏，地址栏，状态栏的高度）
 ........
 
方法：
window.alert();    弹出提示框
window.close();  关闭窗口
window.open();   打开新窗口
     window.open("地址")         在新窗口中打开
     window.open("地址",'_blank/_self/_top')在指定位置打开新窗口
                        _blank ：       新建一个窗口打开
                        _self ：          在本身的窗口打开
     window.open("地址",' ','width=100,height=100')指定新窗口大小
 
<!-- 以下在原生JS中用的较多 -->
 1. window.setTimeout("函数名()",毫秒);    延迟多少毫秒后执行一次函数
 例子：  
        let i = 0;
        function aa(){
        console.log(i);
        i++;
        window.setTimeout("aa()",1000);
        }
        window.setTimeout("aa()",1000);
       <!-- 此种方式能实现重复延迟执行函数。-->

2. window.setInterval("函数名()",毫秒);    以多少毫秒为周期，每隔多少毫秒重复执行一次函数

3. window.clearTimeout(t);      结束指定的setTimeout
 例子：let t = window.setTimeout("函数名()",1000);
           window.clearTimeout(t);   结束指定的setTimeout

4. window.clearInterval(t);       结束指定的setInterval
 例子：let t window.setInterval("函数名()",1000);
           window.clearInterval(t);    结束指定的setInterval