我想通过编写课程来获得风格。
我希望通过纯JavaScript (Not jQuery)执行此类操作。我尝试了很多但失败了。任何人都可以让我知道这个js代码吗？
这可以使用 obj 来定义属性、位置和单位的规则。然后运行两个函数，一个用于格式化样式，另一个用于收集类。
注意：此方法使用 HTML 中的内联 css 来设置元素的 class 属性中设置的解析字符串的样式。
第一个函数将类作为字符串获取，然后使用el.substring，将其解构为它的部分：prop pos和unit。我们将 classObjs 键与传入的类字符串的解构部分进行匹配。然后我们将部件设置为键值。
道具：m=> margin p=>padding
位置：
l => leftr => rightt => topb => bottomn => ''单元： px
注意：n基本上是这样的：padding: 20px;没有位置，所以：p-n-20
第二个函数将获取我们传递给它的元素，并使用正则表达式匹配将它们各自的样式设置为我们在类属性中拥有的类字符串的样式。我使用两个 regex/s 一个用于正单位，另一个用于负单位。所以我们潜在的类看起来像：m-l-30=>margin-left: 30px;或p-t-10=>padding-top: 10px;或m-b--20=>margin-bottom: -20px;或p-n-30=> padding: 30px;。然后该函数获取当前内联样式（如果存在），然后将新解析的样式附加到当前样式并将元素内联样式设置为串联字符串。
//get all elements inside .main
const test = document.querySelectorAll('.main *')
const classObj = {
property: {
m: "margin",
p: "padding"
},
position: {
t: "-top",
b: "-bottom",
l: "-left",
r: "-right",
n: ""
},
unit: "px"
}
function setStyleFromClass(str) {
let styledClass = '';
const prop = str.substring(0,1),
pos = str.substring(2,3),
unit = str.substring(4,str.length)
for (keys in classObj) {
if (typeof classObj[keys] === 'object') {
if (prop in classObj[keys]) {
styledClass += classObj[keys][prop]
}
if (pos in classObj[keys]) {
styledClass += `${classObj[keys][pos]}:`
}
} else {
styledClass += `${unit}px;`
}
}
return styledClass;
}
function getEls(el) {
const regex = /([m|p]{1}[\-]{1}[t|b|l|r|n]{1}[\-][0-9]+)/g
if (el.length > 1) {
// node list
let classes = ''
el.forEach(tag => {
const classes = tag.getAttribute('class')
let classArr = classes.split(' ')
classArr.forEach(cls => {
if(cls.match(regex)) {
let style = setStyleFromClass(cls)
let cur = tag.getAttribute('style')
cur ?
tag.setAttribute('style', `${cur} ${style}`) :
tag.setAttribute('style', `${style}`)
}
if(cls.match(/([m|p]{1}[\-]{1}[t|b|l|r|n]{1}[\-][\-][0-9]+)/gm)) {
let style = setStyleFromClass(cls)
let cur = tag.getAttribute('style')
cur ?
tag.setAttribute('style', `${cur} ${style}`) :
tag.setAttribute('style', `${style}`)
}
})
})
}
}
getEls(test).red {
color: red;
}
.redbg {
background-color: pink;
}<div class="main">
<div class="test red m-t-50 p-l-50">test div element -> m-t-150 margin-top: 150</div>
<p class="test redbg m-b--10 p-n-20">test p element has a negative margin-bottom of 10px, should push next element up into border-box</p>
<div id="testId" class="p-l-200">test element with padding right 200px</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句