javaScript：DOM中的CSS操作

1.style 属性获取元素写在行间的样式

2.getComputedStyle(元素对象，null)可以获取元素的非行间样式

3.案例（定义一个div和按钮，每点击一次按钮div宽度增加）

效果预览图

代码实现

在 JavaScript 中，可以通过 DOM（文档对象模型）操作来访问和修改网页上的 CSS 样式。js提供了灵活的方式来操作和修改 DOM 元素的 CSS 样式，使网页开发者可以根据需要进行样式的动态控制和改变。

1.style 属性获取元素写在行间的样式

通过元素的 style 属性，只能获取元素写在行间的样式

通过元素的style属性设置的样式也是行间样式

2.getComputedStyle(元素对象，null)可以获取元素的非行间样式

getComputedStyle(元素对象，null)可以获取元素的非行间样式

该方法的第一个参数是要获取样式的元素对象，第二个参数一般写成null

他的含义是伪类或者伪元素，一旦具有第二个参数，则表示获取的是伪类或者伪元素的css样式。

在ie中，可以使用 currentStyle来获取元素的样式例如 wp.currentStyle['width']


 let wp = document.querySelector('.wp')
    console.log(wp.style);
    console.log(getComputedStyle(wp,null));
    
    //获取wp对象的所有样式
    let obj = getComputedStyle(wp,null)
    console.log(obj.width,obj.height);
 
    let obj2 = getComputedStyle(wp,':hover')
    console.log(obj2.background);
    // console.log(wp.currentStyle['width']);

3.案例（定义一个div和按钮，每点击一次按钮div宽度增加）

效果预览图

代码实现


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css操作title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 200px;
            height: 200px;
            border: 1px #000 solid;
        }
        .wp:hover {
            background: #ff0;
        }
    style>
head>
<body>
    <div class="wp" >div>
    <button id="btn">点击++button>
body>
html>
<script>
    
    let btn = document.getElementById('btn')
    btn.onclick = function(){
        let i = 5;
        console.log(getComputedStyle(wp).width);
        let w = getComputedStyle(wp).width
        wp.style.width =parseInt(w)+50+'px'  //parseInt保留整数部分
    }
script>

相关阅读:
网络与通信程序设计-基于UDP的广播通信实例
网络基础2(上):http协议、tcp/udp协议
5.3 递归（用带空间图分析，思想很好）
QML中使用自定义Model和SortFilterProxyModel实现搜索
blender3.3下载安装（Windows）
Git 之已有项目创建 git 仓库
2022“杭电杯”中国大学生算法设计超级联赛（8）签到题5题
禁用和开启笔记本电脑的键盘功能，最快的方式
2022年最新《Java八股文面试宝典》全网独一份！（效率最高、知识最新、包含各个技术栈）
【 web网页设计期末课程大作业】基于HTML+CSS+JavaScript智慧路灯综合管理系统

原文地址：https://blog.csdn.net/qq_52799985/article/details/132691025