怎么在js里写css

在JavaScript里写CSS的方法有多种：使用style属性直接设置、创建和插入<style>标签、使用CSS类名、结合CSS变量等。这些方法各有优劣，适用于不同的场景。本文将详细探讨这些方法，并提供实际代码示例，帮助你更好地理解和应用它们。

一、使用`style`属性直接设置

使用JavaScript的style属性可以直接设置元素的CSS样式。这种方法非常直观，适合对单一元素进行动态样式修改。

1.1 示例代码

// 获取元素
var element = document.getElementById('myElement');
// 直接设置CSS属性
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.backgroundColor = 'blue';

1.2 优缺点

优点：简单直接，适合快速修改单个样式。

缺点：代码会变得冗长，难以维护，尤其是当需要设置多个样式时。

二、创建和插入`<style>`标签

创建一个新的<style>标签，并将其插入到文档中，可以批量设置样式，适用于需要动态添加大量CSS规则的情况。

2.1 示例代码

// 创建一个新的 <style> 标签
var style = document.createElement('style');
style.type = 'text/css';
// 添加CSS规则
style.innerHTML = `
  #myElement {
    color: red;
    font-size: 20px;
    background-color: blue;
  }
`;
// 将 <style> 标签添加到 <head> 中
document.getElementsByTagName('head')[0].appendChild(style);

2.2 优缺点

优点：可以批量设置样式，代码更简洁，适合需要动态添加大量CSS规则的场景。

缺点：需要处理字符串拼接，可能会引入语法错误，不易调试。

三、使用CSS类名

通过添加或移除CSS类名，可以方便地切换样式。这种方法结合了HTML和CSS的优势，使代码更具可读性和维护性。

3.1 示例代码

// 获取元素
var element = document.getElementById('myElement');
// 添加CSS类名
element.classList.add('active');
// 移除CSS类名
element.classList.remove('active');
// 切换CSS类名
element.classList.toggle('active');

3.2 优缺点

优点：代码简洁，易于维护，CSS类名可以复用，样式修改集中在CSS文件中。

缺点：需要预先定义CSS类，无法在运行时动态生成复杂样式。

四、结合CSS变量

CSS变量（Custom Properties）可以与JavaScript结合使用，实现更强大的动态样式控制。

4.1 示例代码

/* 定义CSS变量 */
:root {
  --main-color: red;
  --font-size: 20px;
  --background-color: blue;
}
#myElement {
  color: var(--main-color);
  font-size: var(--font-size);
  background-color: var(--background-color);
}

// 动态修改CSS变量
document.documentElement.style.setProperty('--main-color', 'green');
document.documentElement.style.setProperty('--font-size', '25px');
document.documentElement.style.setProperty('--background-color', 'yellow');

4.2 优缺点

优点：非常灵活，可以在运行时动态修改变量，集中管理样式。

缺点：浏览器兼容性较差，较老的浏览器不支持CSS变量。

五、结合JavaScript框架和库

现代JavaScript框架和库（如React、Vue、Angular）提供了更便捷的方式来动态设置样式。通过这些框架，可以将样式与组件状态结合，实现更复杂的动态样式控制。

5.1 React示例代码

import React, { useState } from 'react';
function App() {
  const [isActive, setIsActive] = useState(false);
  const toggleActive = () => {
    setIsActive(!isActive);
  };
  return (
    <div>
      <div
        id="myElement"
        style={{
          color: isActive ? 'red' : 'blue',
          fontSize: isActive ? '20px' : '15px',
          backgroundColor: isActive ? 'blue' : 'yellow'
        }}
      >
        Hello World
      </div>
      <button onClick={toggleActive}>Toggle</button>
    </div>
  );
}
export default App;

5.2 Vue示例代码

<template>
  <div>
    <div
      :class="{ active: isActive }"
      :style="{ color: isActive ? 'red' : 'blue', fontSize: isActive ? '20px' : '15px', backgroundColor: isActive ? 'blue' : 'yellow' }"
    >
      Hello World
    </div>
    <button @click="toggleActive">Toggle</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>
<style>
.active {
  border: 1px solid black;
}
</style>

六、结合CSS-in-JS

CSS-in-JS是一种将CSS直接写在JavaScript中的技术，使样式与组件紧密结合，常见的库有Styled-Components和Emotion。

6.1 Styled-Components示例代码

import React, { useState } from 'react';
import styled from 'styled-components';
const MyElement = styled.div`
  color: ${props => (props.active ? 'red' : 'blue')};
  font-size: ${props => (props.active ? '20px' : '15px')};
  background-color: ${props => (props.active ? 'blue' : 'yellow')};
`;
function App() {
  const [isActive, setIsActive] = useState(false);
  const toggleActive = () => {
    setIsActive(!isActive);
  };
  return (
    <div>
      <MyElement active={isActive}>Hello World</MyElement>
      <button onClick={toggleActive}>Toggle</button>
    </div>
  );
}
export default App;

6.2 Emotion示例代码

/ @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React, { useState } from 'react';
const myElementStyle = isActive => css`
  color: ${isActive ? 'red' : 'blue'};
  font-size: ${isActive ? '20px' : '15px'};
  background-color: ${isActive ? 'blue' : 'yellow'};
`;
function App() {
  const [isActive, setIsActive] = useState(false);
  const toggleActive = () => {
    setIsActive(!isActive);
  };
  return (
    <div>
      <div css={myElementStyle(isActive)}>Hello World</div>
      <button onClick={toggleActive}>Toggle</button>
    </div>
  );
}
export default App;

七、项目管理中的样式管理

在大型项目中，良好的样式管理是必不可少的。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来帮助团队更好地管理样式和项目进度。

7.1 PingCode

PingCode是一个专业的研发项目管理系统，支持敏捷开发、需求管理、缺陷跟踪等功能。它可以帮助团队高效地管理样式和代码变更，确保项目顺利进行。

7.2 Worktile

Worktile是一款通用的项目协作软件，支持任务管理、文档协作、团队沟通等功能。通过Worktile，团队可以方便地协作和分享样式资源，提高工作效率。

总结

在JavaScript中写CSS有多种方法，每种方法都有其适用的场景和优缺点。使用style属性直接设置、创建和插入<style>标签、使用CSS类名、结合CSS变量，以及结合JavaScript框架和库、CSS-in-JS等方法都可以有效地管理和控制样式。结合项目管理工具，如PingCode和Worktile，可以进一步提升团队的协作效率和项目管理水平。希望本文能帮助你更好地理解和应用这些方法，提高你的开发效率。