主页 / 问题 / 1231312
Accepted
Влад
Asked:2022-01-14 19:25:29 +0000 UTC2022-01-14 19:25:29 +0000 UTC

将自己的样式添加和应用到元素

  • 772

各位高手，帮忙了解一下。该页面有一个元素：

<div id="list" class="res"></div>

您需要使用 JS 将您的类添加到其中，代码如下：

var styleElement = document.getElementById('list');
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.innerHTML = '.res2 { position:absolute; width:264px; height: 300px; overflow:auto; }';
    document.getElementById('list').appendChild(styleElement);
    document.getElementById('list').className = 'res2';

脚本有效，一切都被创建和应用，但实际上，没有视觉上的变化。如果您不添加新类，而是像这样替换现有类：

 var styleElement = document.getElementById('list');
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.innerHTML = '.res { position:absolute; width:264px; height: 300px; overflow:auto; }';      
document.getElementById('list').appendChild(styleElement);

那么一切正常，但由于“res”也用于其他元素，因此此解决方案不适合。如何正确添加您的课程？

javascript

1 个回答

  1. Best Answer

    const list = document.querySelector('#list');
list.classList.add('inline-block');
list.classList.add('padding-10px');
list.classList.add('color-white');
list.classList.add('background-color-blue');
    body {
  font-family: sans-serif;
}

.inline-block {
  display: inline-block;
}

.padding-10px {
  padding: 10px;
}

.color-white {
  color: white;
}

.background-color-blue {
  background-color: blue;
}
    <div id="list" class="res">Контент</div>

    您可以通过 JS 添加样式（但有必要吗？）：

    function addStyleSheetFromClasses(classes) {
  const sheet = createStyleSheet();
  classes.forEach(classItem => {
    for (propertyObj of classItem.properties) {

      for (property in propertyObj) {
        const cssText = `${property}: ${propertyObj[property]}`;
        sheet.addRule(`.${classItem.name}`, cssText);
      }

    }
  });
}

function createStyleSheet(href) {
  if (typeof document.createStyleSheet === 'undefined') {
    const createStyleSheetLocal = (href) => {
      function createStyleSheet(href) {
        if (typeof href !== 'undefined') {
          var element = document.createElement('link');
          element.type = 'text/css';
          element.rel = 'stylesheet';
          element.href = href;
        } else {
          var element = document.createElement('style');
          element.type = 'text/css';
        }

        document.getElementsByTagName('head')[0].appendChild(element);
        var sheet = document.styleSheets[document.styleSheets.length - 1];

        if (typeof sheet.addRule === 'undefined')
          sheet.addRule = addRule;

        if (typeof sheet.removeRule === 'undefined')
          sheet.removeRule = sheet.deleteRule;

        return sheet;
      }

      function addRule(selectorText, cssText, index) {
        if (typeof index === 'undefined')
          index = this.cssRules.length;

        this.insertRule(selectorText + ' {' + cssText + '}', index);
      }

      return createStyleSheet(href);
    };
    return createStyleSheetLocal(href);
  }
}

const classes = [{
  name: 'inline-block',
  properties: [{
    'display': 'inline-block'
  }]
}, {
  name: 'padding-10px',
  properties: [{
    'padding': '10px'
  }]
}, {
  name: 'color-white',
  properties: [{
    'color': 'white',
  }]
}, {
  name: 'background-color-blue',
  properties: [{
    'background-color': 'blue',
  }]
}];

addStyleSheetFromClasses(classes);
const classesName = classes.map(item => item.name);
const list = document.querySelector('#list');
list.classList.add(...classesName);
    <div id="list" class="res">Контент</div>

    • 1

相关问题