如何檢查一個類是否有符號，如果有，用它做點什么？

Question

這段代碼使用類作為CSS屬性，並將= -之后的所有內容用作其值。

例如：

 function getProp(classStr) { return classStr.split('=')[0] } function getValues(classStr) { var values = classStr.split('=')[1] return values.split(',').join(' ') } function transform(el, prop, values) { $(el).css(prop, values) } var elements = $('div, p, span, img, li, ul, a, h1, h2, h3, h4, h5, h6') elements.each(function(i, el) { var classList = $(el).attr('class') if (!classList) return var classProps = classList.split(' ') $(classProps).each(function(i, str) { var prop = getProp(str) var values = getValues(str) transform(el, prop, values) }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='color=red font-size=50px font-family=arial'>hello world</div> 

太..這是一個問題。 當您想為一個屬性分配多個值時，例如border=2px,solid,black ，如果在此之前有一個甚至沒有=符號的類，整個代碼就會崩潰。

我想是因為

function getValues(classStr) {
  var values = classStr.split('=')[1]
  return values.split(',').join(' ')
}

功能？？

我們如何檢查該屬性是否沒有值（standart css類）或多個用逗號編寫的值（ border=2px,solid,black ）？

Answer 1

您可以使用正則表達式獲取匹配的參數。 注意，我添加了一個名為taco的類，它不會引發結果

這是一個功能齊全的示例，以您的代碼為基礎

 function transformValue(value) { if (!value.includes('rgb')) { return value.split(',').join(' '); } return value; } function transform(el, prop, values) { $(el).css(prop, values); } var elements = $('div, p, span, img, li, ul, a, h1, h2, h3, h4, h5, h6'); elements.each(function(i, el) { var classList = $(el).attr('class'); if (!classList) return true; var regex = /([\\w-]+)=([\\w\\d,%()\\.]+)/g; var matches; var params = []; while (matches = regex.exec(classList)) { var prop = matches[1]; var values = transformValue(matches[2]); transform(el, matches[1], values); } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='color=red font-size=50px font-family=arial taco border=1px,solid,red margin-left=20% background-color=rgba(0,255,0,0.5)'>hello world</div> 

推理與表現

有人可能會質疑我選擇使用正則表達式，因為它因效率低下而聲譽不佳。 但是，鑒於非常規表達途徑僅增加了0.75％，我發現解決方案的可讀性是一個不錯的選擇。

https://jsperf.com/so53670448

Answer 2

對於類名/列表，這是很奇怪的，並不是真正有效的語法。 無論如何，您不需要jQuery即可將class屬性字符串轉換為style屬性，此外，您的代碼可以更簡潔。 類似於以下內容：

 setStyle(document.querySelector("div#weird")); setStyleFromShortcuts(document.querySelector("div#weirder")); function setStyle(elemWithWeirdClass) { const weirdClass = Array.from(elemWithWeirdClass.classList); if (weirdClass.length < 1 || !weirdClass.join("").includes("=")) { return; } const converted = weirdClass .reduce( (styleElement, semiClass) => [...styleElement, semiClass.split("=").join(":")], []).join(";"); elemWithWeirdClass.removeAttribute("class"); elemWithWeirdClass.setAttribute("style", converted); } function setStyleFromShortcuts(elemWithWeirdClass) { const shortCuts = { c: "color", fs: "font-size", ff: "font-face" } const weirdClass = Array.from(elemWithWeirdClass.classList); const getShortCut = ([key, value]) => `${shortCuts[key]}:${value}`; if (weirdClass.length < 1 || !weirdClass.join("").includes("=")) { return; } const converted = weirdClass .reduce( (styleElement, semiClass) => [...styleElement, getShortCut(semiClass.split("="))], []).join(";"); elemWithWeirdClass.removeAttribute("class"); elemWithWeirdClass.setAttribute("style", converted); } 

 <div id="weird" class='color=red font-size=50px font-family=arial'>hello world</div> <div id="weirder" class='c=orange fs=50px ff=times new roman'>hello world</div> 

Answer 3

正則表達式比簡單的index昂貴，此代碼在功能上讓他們可以嘗試...

此代碼也因您的不同而不同，一個“ IF” ...

 function getProp(classStr) { return classStr.split('=')[0] } function getValues(classStr) { var values = classStr.split('=')[1] return values.split(',').join(' ') } function transform(el, prop, values) { $(el).css(prop, values) } var elements = $('div, p, span, img, li, ul, a, h1, h2, h3, h4, h5, h6') elements.each(function(i, el) { var classList = $(el).attr('class') if (!classList) return var classProps = classList.split(' ') $(classProps).each(function(i, str) { //if contain a symbol '=' is procesed, like a css //else do nothing ...because is a class if ( str.indexOf('=') > -1 ) { var prop = getProp(str) var values = getValues(str) transform(el, prop, values) } }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='color=red class-temporal border=1px,solid,red font-size=50px font-family=arial'>hello world</div>