Question

我有一个字幕抓取工具的这个功能，我需要在图像上添加悬停设置，但它们不是css文件，所以样式是在这个函数中写的。
我的问题是我可以在javascript函数中添加悬停效果以及如何操作吗？希望我的问题得到理解！这是功能：

<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>

Answer 1

这是我写的一个名为cssText的函数该函数将根据需要容纳任意数量的对象，这些对象必须具有一个称为“选择器”的属性，您也可以使用纯CSS传递字符串，但是使用对象更有意义

这是一个例子：

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

在您的最底部，我在选择器上调用了cssText函数，该函数仅将样式应用于已悬停的所有h1元素

// 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>

用Javascript写样式

1 个答案: