强制修改CSS的属性style

最新推荐文章于 2025-05-11 22:31:14 发布

水桶前辈

最新推荐文章于 2025-05-11 22:31:14 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/robinson_911/article/details/83615557

JavaScript 专栏收录该内容

37 篇文章

订阅专栏

本文介绍两种在JavaScript中强制修改页面元素样式的实用方法：一是直接在JS代码中修改style属性，覆盖CSS样式；二是通过获取页面元素ID，针对性地修改特定页面的CSS，避免全局影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 直接在js代码中强制修改style ，达到布局的要求

代码里面的style（style={{ paddingLeft: '15px', paddingRight: '15px' }}）可以覆盖掉css中的styles.resetBtn

<Button
  type="primary"
  className={styles.resetBtn}
  style={{ paddingLeft: '15px', paddingRight: '15px' }} //// 强制修改padding
  onClick={() => { this.reset(); }}
>重置</Button>

2. 获取页面元素的id来修改页面的css

这里的global代表它是一个全局属性。

当你要修改单个页面中的css时，要加个名字把全局属性包一下，否则所有的页面都会被修改

.tableListForm {
  :global {
    .ant-form-item {
      margin-bottom: 24px;
      margin-right: 0;
      display: flex;
      > .ant-form-item-label {
        width: auto;
        line-height: 32px;
        padding-right: 8px;
      }
      .ant-form-item-control {
        line-height: 32px;
      }
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
  .submitButtons {
    white-space: nowrap;
    margin-bottom: 24px;
  }
}

以上就是两种简单强制修改页面元素属性的方法！