为div中的所有元素设置文本颜色

Question

我有一个SCSS混音，看起来是这样的：

/**
 * Text color
 */
@mixin text-color( $color ){
    color: $color;

    h1,
    h2,
    h3,
    h4,
    h5 {
        color: $color
    }

    p,
    li {
        color: $color;
    }

    a {
        color: $color;
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }
}

这不是最美好的东西，但它真的很方便。每当某个子元素的文本颜色上升时，我就会使用它。不时地，有一个li或一个a有一些样式从更高的树。

我在找JavaScript等价物。原因是，我希望用户选择一个十六进制颜色，然后所有的元素都会得到那个颜色。

我现在的版本是这样做的(在Vue-mixin中)：

mounted(){
  let chosenHex = #FF0000;
  this.setTextColorOnAllElements( chosenHex );
},
methods: {
  setTextColorOnAllElements( textColor ){
    setTimeout( () => { // Otherwise the el's aren't rendered
      this.setTextColorOnTagType( textColor, 'h1' );
      this.setTextColorOnTagType( textColor, 'h2' );
      this.setTextColorOnTagType( textColor, 'h3' );
      this.setTextColorOnTagType( textColor, 'h4' );
      this.setTextColorOnTagType( textColor, 'h5' );
      this.setTextColorOnTagType( textColor, 'h6' );
      this.setTextColorOnTagType( textColor, 'h7' );
      this.setTextColorOnTagType( textColor, 'p' );
      this.setTextColorOnTagType( textColor, 'li' );
      this.setTextColorOnTagType( textColor, 'span' );
      this.setTextColorOnTagType( textColor, 'a' );
    });
  },
  setTextColorOnTagType( textColor, tagType ){
    if( this.id ){
      let elements = document.querySelectorAll( '#' + this.id + ' ' + tagType );
      elements.forEach( (element) => {
        element.style.color = textColor;
      });
    }
  }

}

只是喘不上气，感觉很笨拙。

这个最重要的问题：，对于在div中设置所有元素的文本颜色的JavaScript函数，有什么建议吗？

Answer 1

在这里回答最重要的问题。

你在找这样的东西吗？快跑这段。

​

//use querySelectorAll to get all elements within the div
var children = document.querySelectorAll("div p")

//loop through those elements and change the color
for (var i = 0; i < children.length; i++) {
  children[i].style.color = "blue";
}

<div id="parent">
  <p>Lorem</p>
  <p>Ipsum</p>
  <p>Lorem</p>
  <p>Ipsum</p>
  <p>Lorem</p>
  <p>Ipsum</p>
  <p>Lorem</p>
  <p>Ipsum</p>
</div>

​

或者，针对父div使其更容易：

​

//use querySelector to target parent div
var parent = document.querySelector("div");

//set color on parent div to change color of children
parent.style.color = "blue";

<div id="parent">
  <h1>Lorem</h1>
  <h2>Ipsum</h2>
  <h3>Lorem</h3>
  <span>Ipsum</span>
  <li>Lorem</li>
</div>

​

Answer 2

可能不是您要找的东西，但从技术上讲，这是通过创建和插入样式表来实现的。

const forceColor = (selector, color) => {
  const rule = [
    `${selector} { color: ${color}; }`,
    ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'li'].map(
      v => `${selector} ${v}`
    ).join(', ') + ` { color: ${color}; }`,
    `${selector} a { color: ${color}; text-decoration: underline; }`,
    `${selector} a:hover { text-decoration: none; }`,
  ].join(' ');
  const css = document.createElement('style');
  css.type = 'text/css';
  css.styleSheet.cssText = rule;
  document.querySelector('head').appendChild(css);
};

你可以这样用它：

forceColor('.someCSSSelector', '#FF0000');

Answer 3

注意子元素颜色不应该有颜色，它取自父div颜色

​

const container = document.querySelector('.container');
const colorClassPicker = document.getElementById('colorClassPicker');
const colorHexPicker = document.getElementById('colorHexPicker');

const addClass = (className) => {
  container.classList.replace(container.classList.value, className);
};
const addStyle = (hex) => {
  container.style.color = hex;
};

// colorClassPicker.addEventListener('change', (e) => {
//   addClass(e.target.value);
// });
colorHexPicker.addEventListener('change', (e) => {
  addStyle(e.target.value);
});

// addClass(colorClassPicker.value);
addStyle(colorHexPicker.value);

h1,
h2,
h3,
a,
li,
p {
  color: inherit;
}

<!-- Color classes
<select id="colorClassPicker">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select> -->

Color hex
<select id="colorHexPicker">
  <option value="#e82830">#e82830</option>
  <option value="#690">#690</option>
  <option value="#2c28e8">#2c28e8</option>
</select>

<div class="container">
  <h1>H1</h1>
  <h1>H2</h1>
  <h1>H3</h1>
  <a href="">Link</a>
  <ul>
    <li>Lii</li>
    <li>Li2</li>
  </ul>
  <p>p</p>
</div>

​

此外，您还可以通过在父div中切换类来完成这一任务。

// colorClassPicker.addEventListener('change', (e) => {
//   addClass(e.target.value);
// });