如何在CSS中直接调用JavaScript代码？

在 CSS 中调用 JS 代码，主要是通过设置背景对象的 url 属性来实现。，，“ css，body {， height: 200px;， background: url(javascript:alert("上帝来了!blog.k99k.com"));，}，“，，不过这种用法存在安全风险，可能会被用于攻击，因此需谨慎使用。

在CSS中调用JS代码主要有以下几种方法：

1、通过URL伪协议：利用CSS属性的值可以设置为一个URL，而这个URL可以是一个JavaScript函数的形式。

“`css

body {

background: url(javascript:alert(‘test!’));

}

   这种方式较为简单直接，但存在安全隐患，可能会被用于跨站脚本攻击（XSS），所以在实际开发中要谨慎使用。
2、使用expression（仅IE5及其以后版本支持）：可以将CSS属性和JavaScript表达式关联起来，CSS属性的值等于JavaScript表达式计算的结果，不过这种方法对浏览器资源要求较高，且在非IE浏览器中可能无法正常工作，一般不建议使用。
   给元素固有属性赋值示例：
     ```css
       #myDiv {
         position: absolute;
         width: 100px;
         height: 100px;
         left: expression(document.body.offsetWidth 110 + "px");
         top: expression(document.body.offsetHeight 110 + "px");
         background: red;
       }

给元素自定义属性赋值示例：

“`css

a {star : expression(onfocus=this.blur)}

<a href="link1.htm">link1</a>

<a href="link2.htm">link2</a>

<a href="link3.htm">link3</a>

3、事件监听结合CSS类名或ID选择器：先在HTML中为元素设置好类名或ID，然后在CSS中定义相应的样式，最后在JavaScript中通过事件监听来触发与这些样式相关的操作。
   有一个按钮和一个div，当点击按钮时改变div的背景颜色：
     HTML代码：
       ```html
         <button id="myButton">点击我!</button>
         <div id="myDiv">我是一个div元素</div>

CSS代码：

“`css

#myDiv {

width: 200px;

height: 100px;

background-color: lightblue;

display: flex;

align-items: center;

justify-content: center;

transition: background-color 0.5s;

}

     JavaScript代码：
       ```javascript
         document.getElementById('myButton').addEventListener('click', function() {
           document.getElementById('myDiv').style.backgroundColor = 'lightgreen';
         });

4、动态修改元素的类名（通过JS）：在CSS中定义不同的类名对应的样式，然后通过JavaScript根据需要动态地为元素添加或移除类名，从而改变元素的样式。

CSS代码：

“`css

.button {

padding: 10px 20px;

background-color: #007BFF;

color: #fff;

border: none;

cursor: pointer;

}

.active {

background-color: #28a745;

}

     HTML代码：
       ```html
         <button  id="myButton">Click Me</button>

JavaScript代码：

“`javascript

document.getElementById(‘myButton’).addEventListener(‘click’, function() {

this.classList.toggle(‘active’);

});

以下是两个关于CSS中调用JS代码的常见问题及解答：问题一：为什么在CSS中使用expression可能会导致性能问题？解答：因为expression中的JavaScript代码会在页面渲染、窗口大小调整、鼠标移动等很多情况下重新计算，这会频繁地占用浏览器的资源，导致性能下降，而且它只在IE浏览器中有较好的支持，在其他浏览器中可能会出现兼容性问题或根本无法正常工作。问题二：如何确保在CSS中调用JS代码的安全性？解答：避免使用像URL伪协议这种容易被利用进行跨站脚本攻击的方式，如果使用事件监听等方式，要确保对用户输入进行严格的验证和过滤，防止反面代码的注入，要遵循安全的编程规范和最佳实践，例如使用HTTPS协议传输数据等，以保障整个网站的安全性。