尝试使用原型属性创建自定义方法，但我得到无法读取未定义的属性“替换”

Question

所以我在搞乱 JS 试图创建一种方法，在不删除当前应用的样式的情况下向元素添加 CSS 样式：

// ==================================================================================================
// this method adds style to an element using CSS inline syntax without removing unaltered CSS styles
// ==================================================================================================
Element.prototype.cssStyle = function (style)
{
    let styleChars = style.split(''); // split each character of the style arg as an item in an array
    let positions = [];
    for(let i=0; i<styleChars.length; i++){
        if(styleChars[i] === '-'){
            positions.push(i+1);
        };
    };
    positions.forEach(function (position){ // for each match
        styleChars.splice(position, 1, style[position].toUpperCase()); // make that character uppercase
    });
    styleChars.splice(0, 0, '[["'); // add a "[[" item on the first position
    styleChars.splice(styleChars.length, 0, '"]]'); //add a "[[" on the last position
    style = styleChars.join('') // join back the array into a string
    style = style.replace(/:/g, "\",\"").replace(/;/g, "\"],[\"").replace(/-/g, ""); // replace some character in order to make the string look like an array
    style = JSON.parse(style); // parse the string into an array
    for(let i=0; i<style.length; i++){ // for each item in the array
        let property = style[i][0].replace(/ */, ""); // remove some characters which might inhibit normal execution
        let value = style[i][1].replace(/;/, "").replace(/ */, ""); //remove some characters which might inhibit normal execution
        this.style[property] = value // change style of the element
    };
    return this.getAttribute('style'); //return all inline CSS styles
}

所以如果我尝试像这样设置元素的样式：

Element.cssStyle('background-color: white; color: #000')

它按预期工作，但如果我在参数字符串的末尾添加;，我会得到这个

Element.cssStyle('background-color: white; color: #000;')

'Uncaught TypeError: Cannot read property 'toUpperCase' of undefined'

即使我没有发现 replace 方法有任何明显问题，但可能是什么？

在该行替换空格可以正常工作，但尝试替换 ; 我得到了那个错误。

我的代码写得有多糟糕？

谢谢！

Answer 1

这是一个例子：

Element.prototype.cssStyle = function(styleStr) {
  let styles = styleStr.split(';')
  styles.forEach(style => {
    if (!style.trim()) return;

    let name = style.split(':')[0].trim();
    let value = style.split(':')[1].trim();
    this.style[name] = value;
  })

  return this.getAttribute('style'); //return all inline CSS styles
}

let testEl = document.getElementById("test")
console.log(testEl.cssStyle("color: white; background-color: black;"))

<p id="test">This is a test paragraph</p>

需要注意的几点：

• 这不会解析所有 CSS，但我相信它适用于您的示例。
• 不建议修改对象的原型，因为如果您将其他人的代码与您的代码一起使用，您可能会遇到覆盖彼此修改的问题。

代码的工作原理是将字符串拆分为每个样式段，然后循环使用 forEach 并使用 this.style 更改元素的样式

文档：

• Array.forEach()
• String.trim()
• String.split()

希望这会有所帮助。

Answer 2

我会这样做：

Element.prototype.cssStyle = function(str) {
  // Split styles
  const styles = str.split(';');
  // For each of them
  for (let style of styles) {
    // Get the property and value without extra spaces (using trim)
    const [property, value] = style.split(':').map(s => s.trim());
    // If none of them is empty
    if (property.length && value.length) {
      const camelCaseProperty = kebakCaseToCamelCase(property);
      this.style[camelCaseProperty] = value;
    }
  }

  return this.getAttribute('style');
};

function kebakCaseToCamelCase(str) {
  return str.replace(/-(.)/g, (match, capture) => capture.toUpperCase());
}

document.querySelector('span')
  .cssStyle('display: block; background-color: red; color: white;');

<span>Hello world</span>

但正如@anbcodes 在他的回答中证明的那样，我认为您甚至可以跳过驼峰式转换