我怎样才能抽象出这个改变 CSS 样式的 function

Question

I'm trying to abstract a function.

This function loops over every child node of a given DOM element (passed into the function as an argument) and applies the same CSS style property & value to each one.

eg

function styleChildNodes(parent){

const children = parent.childNodes


for (let i = 0; i < children.length; i++) {

const child = children[i];




child.style.background = "red"


} }

In this example I have hard-coded the CSS property: background & its value as: "red" . The function will loop over every child node of the given parent element and change their CSS background properties to the color red.

But instead of having any hard-coded CSS property-value pair inside the function such as:

background = "red" , or, visibility = "hidden" , or, opacity = "1" , etc.

I want to pass in the desired CSS property and its value as arguments.

Here is an illustration of the concept:

function styleChildNodes(parent, property, value){

const children = parent.childNodes



for (let i = 0; i < children.length; i++) {

const child = children[i];




child.style.property = value


} }

The CSS property and its value could be anything I choose and I could use the function like this:

styleChildNodes(div, opacity, "0")

styleChildNodes(table, visibility, "hidden")

styleChildNodes(tr, background, "red")

styleChildNodes(div, height, "10px")

These are just pseudo-coded examples - but hopefully it conveys what I'm trying to achieve.

Any ideas, work-arounds, or non-eval() solutions are welcome!

Thank you for reading:-)

PS I hope I'm not misapplying "to abstract" when I say "I'm trying to abstract a function." Please let me know if I'm using imprecise terminology!

"Abstraction is a computer science concept in which an implementation is separated from its interface."

Answer 1

You can wrap property in brackets, but the property will need to be passed as a STRING so wrap it in quotes.

function styleChildNodes(parent, property, value) {
  const children = parent.childNodes
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    child.style[property] = value
  }
}

you can also pass an object to do more than one:

function styleChildNodes(parent, styles) {
  const children = parent.childNodes
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    child.style[property] = value
    for(style in styles){
        child.style[style] = styles[style]
   }
  }
}

styleChildNodes(parent, {
"color": "red",
"background-color": "green"
}) 

Answer 2

I read the stylesheet, I created a rule with the external properties in a class called .yourClass and added this rule to the stylesheet. After I have added this class to each node child (also deep node childes in my code). I created a possible call and use of this function. If you don't understand something please ask.

 let sheet = document.styleSheets[0] function styleChildNodes(parent,...cssPropertiesValues){ let formattedCssPropertiesValues = cssPropertiesValues.map((item,index)=> index%2? `${item};`: `${item}: ` ); let rule = `.yourClass { ${formattedCssPropertiesValues.join('')} }` //join convert from array to string. I'm using as separator the empty string to merge the items of the array sheet.insertRule(rule,0); //the first parameter is a string (its format is `selector{prop1:val1;prop2:val2}`) that represents your rule. The second parameter is the position in the stylesheet where you insert the rule console.log(rule) const children = parent.querySelectorAll("*"); //When you have an iterable object like an array or an HTMLCollection //you can iterate it whit a for of. `child` will be the current item for (let child of children) child.classList.add('yourClass'); } let parentNode = document.getElementById('my-parent'); styleChildNodes(parentNode,'opacity',0.5,'display','block');

 <link rel="stylesheet"> <div id="my-parent"> <span></span> <p></p> </div>