js设置div css样式

// 获取div元素
var divElement = document.getElementById('myDiv');

// 设置单个样式属性
divElement.style.backgroundColor = 'blue';
divElement.style.width = '200px';

// 设置多个样式属性
divElement.style.cssText = 'background-color: blue; width: 200px; height: 100px;';

// 定义CSS类
.myClass {
    background-color: blue;
    width: 200px;
    height: 100px;
}

// 获取div元素
var divElement = document.getElementById('myDiv');

// 添加CSS类
divElement.classList.add('myClass');

// 获取div元素
var divElement = document.getElementById('myDiv');

// 创建一个新的style对象
var newStyle = {
    backgroundColor: 'blue',
    width: '200px',
    height: '100px'
};

// 应用新的样式
for (var prop in newStyle) {
    if (newStyle.hasOwnProperty(prop)) {
        divElement.style[prop] = newStyle[prop];
    }
}

// 使用styled-components示例
import styled from 'styled-components';

const StyledDiv = styled.div`
    background-color: blue;
    width: 200px;
    height: 100px;
`;

// 在组件中使用StyledDiv
function MyComponent() {
    return <StyledDiv>Content</StyledDiv>;
}