Write style in Javascript

Question

I have this function for a marquee crawler and I need to add hover setting on the image but their is no css file, so the style is write in this function.
My question is can I add hover effect in javascript function and how to do it ?
Hope that my question is understood ! This is the function:

<script type="text/javascript">
       marqueeInit({
           uniqueid: 'mycrawler2',
           style: {
               'padding': '2px',
               'width': '1000',
                'background':'#9ec437',
               'height': '160px'
           },
  inc: 5, //speed - pixel increment for each iteration of this marquee's movement
  mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
           moveatleast: 1,
           neutral: 150,
           savedirection: true
       });
</script>

Check the html output and target the element in javascript... — elclanrs, May 16 '13 at 07:15
See http://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript — pixelistik, May 16 '13 at 07:26

score 0 · Answer 1 · edited Aug 01 '20 at 21:09

Here's a function I wrote called cssText The function will take in as many objects as you want that must have a property called "selector", you can also pass in a string with plain CSS, but it makes more sense to use an object

Here's an example:

cssText({
    "selector":"cssSelector",
    "color":"green"
});

In your case at the very bottom I called the cssText function on a selector which just applies the styles to all h1 elements that have been hovered

// cssText function
cssText = (...styles) => {
        // initialize styleTag and styleString
        let styleTag = document.querySelector('style'),
            styleString = '';
        // loop through all the parameters
        for (const iterator of styles) {
            // what to do if it's an object
            if (typeof iterator == 'object') {
                // initialize properties string
                let properties = '';
                // stop entirely if there's no selector property
                if (iterator.selector == null) {
                    return;
                };
                // loop through all the properties in the object
                for (const property in iterator) {
                    // if it's not the selector add it to the properties string
                    if (property != 'selector') {
                        properties += `${property}:${iterator[property]};\n`;
                    };
                };
                // Add the entire object to the styleString
                styleString +=`\n${iterator.selector}{\n${properties}\n}\n`;
            }else {
                // Just add the plain text css if the parameter is a string
                styleString += "\n" + iterator + "\n";
            };
        };
        // If there's no style tag then add one to the head of the document
        styleTag == null ? document.head.innerHTML += `<style>${styleString}</style>` : styleTag.innerHTML += styleString;
    };
    // call the cssText function
    cssText({"selector":"h1:hover","color":"green","font-family":"helvetica"});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1>Hello World</h1>
</body>
</html>

Write style in Javascript

1 Answers1