JS修改style样式

1、直接修改

element.style.属性= "属性值"

-样式用驼峰命名法 background-color-->backgroundColor

2、修改类名

如果修改的样式比较多，可以直接另外写一个[或多个]类，用className覆盖

element.className="class1 class2 ..."

3、动态添加样式

    const style = document.createElement('style');style.type = 'text/css';style.innerHTML = hourPointer + minPointer + secondPointer;//自己要添加的样式（非固定）document.getElementsByTagName('head')[0].appendChild(style);

1、样式不一定要一开始就有style标签，可以在JS里创建

2、JS里面写样式，一般是因为要用过一些非静态的变量，比如这里就是要写时钟，想要JS获取当前的时间

 var now = new Date();var h = now.getHours();var m = now.getMinutes();var s = now.getSeconds();h = h > 12 ? h - 12 : h;h = h * 30 - 90;m = m * 6 - 90;s = s * 6 - 90;const hourPointer = `@keyframes hourPointer {from {transform: rotate(${h}deg);}to {transform: rotate(${360 + h}deg);}} `

3、模板字符串，绝佳好用。

4、个人记录：

问题：一开始把<body>写在前面，<script>写在后面，结果document.querySelet和其他获取元素的方法拿不到元素，但是在控制台输入命令，却可以拿到元素。

方法：调整body和script位置就对了。因为html解析时，浏览器遇到script标签会暂停html，先去下载和解析script。

JS修改style样式相关推荐

通过JS修改CSS样式
通过JS修改CSS样式有两种方法: 修改某一属性的值修改某一元素的class名,使其被别的样式修饰修改某一属性的值 <!DOCTYPE html> <html> <h ...
js改变style样式和css样式
js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: [html] view plaincopy < ...
原生Javascript/原生JS修改CSS样式的四种方式
设置style var domName = document.querySelector('#domName'); domName.style.backgroundColor = '#aaa' 设置属 ...
js修改style中某个属性_JS 和 CSS 交互的 5 种方法
英文 | https://davidwalsh.name/ways-css-javascript-interact译文 | https://www.webhek.com/post/ways-css-j ...
微信小程序之Js修改元素样式
微信小程序和普通的前端开发有很多不同. 后者修改样式js可以操作DOM,即 document.getElementById(id).style.property=new style 但是微信的js是没 ...
JS修改css样式的8种方式
从其他人的博客上看到的,感觉归纳的很棒,在这里种个草. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
js修改css样式属性_这个笔记《CSS样式的常见属性及值》，让菜鸟轻松学会包粽子...
常见样式属性及值字体: font -family -size -style: normal(正常)|italic(倾斜)|oblique -weight: normal|bold(粗体) 如果组合起 ...
html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
js修改html不成功,为什么这段代码中用js修改css样式中的display属性却不成功？
getByClass() 这个方法写的有问题,你这个方法目的是获取className的元素数组. var s = getByClass('li'); 但是你用的是 li,是tagName fu ...

JS修改style样式

1、直接修改

2、修改类名

3、动态添加样式

JS修改style样式相关推荐

最新文章

热门文章