js给div加css样式

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

// 设置样式
divElement.style.backgroundColor = 'blue';
divElement.style.color = 'white';
divElement.style.padding = '10px';

/* 在CSS文件中定义一个类 */
.my-style {
  background-color: blue;
  color: white;
  padding: 10px;
}

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

// 添加CSS类
divElement.classList.add('my-style');

<!-- 在HTML中定义一个style标签 -->
<style id="myStyle"></style>

// 获取style元素
var styleElement = document.getElementById('myStyle');

// 设置新的CSS规则
styleElement.innerHTML = `
  #myDiv {
    background-color: blue;
    color: white;
    padding: 10px;
  }
`;

import styled from 'styled-components';

const StyledDiv = styled.div`
  background-color: blue;
  color: white;
  padding: 10px;
`;

// 在组件中使用StyledDiv
function MyComponent() {
  return <StyledDiv>这是一个样式化的div</StyledDiv>;
}