Question

您好我是JavaScript和CSS的新手，我想创建一个JavaScript函数，该函数可以动态地将此函数内定义的样式属性应用于特定元素。

请检查下面的代码，我已设法创建元素并将该类添加到该元素，但我很难在此函数中实现样式属性。

function highlight(){
    var styl = document.querySelector("#element_to_pop_up");
    styl.style.cssText = " background-color:#fff;border-radius:15px;    color:#000;display:none;padding:20px;min-width:30%;min-height: 30%;max-width:40%; max-height: 40%;";
    styl.className = styl.className + "b-close";
    //.b-close{
        //cursor:pointer;
        //position:absolute;
        //right:10px;
        //top:5px;
   //}
}

请高度赞赏任何帮助。

Answer 1

在javascript上使用jquery。

$(selector).css("width":"100%").css("height","100px");

Answer 2

如果要在页面中添加样式类并编写其样式内容，则应首先创建它，然后将其放在<style>标记中，以便稍后使用。

这是你要走的路：

function highlight() {
  var styl = document.querySelector("#element_to_pop_up");

  //Create StyleSheet
  var styleSheet = document.createElement("style");
  var text = document.createTextNode("\n.b-close {\n cursor:pointer;\n  position:absolute;\n right:10px;\n top:5px;\n}");

  //Put the style on it.
  styleSheet.appendChild(text);

  //Append it to <head>
  document.head.appendChild(styleSheet);
  //Apply it
  styl.className = styl.className + " b-close";

}

<div onclick="highlight()" id="element_to_pop_up">bla bla bla</div>

创建样式表元素。
把风格放在上面。
将其附加到文档的开头。
使用此样式或将其应用于元素。

修改

如果您将样式top和right值作为参数传递给函数，请执行以下操作：

function highlight(right, top) { var styl = document.querySelector("#element_to_pop_up"); var styleSheet = document.createElement("style"); var text = document.createTextNode("\n.b-close {\n cursor:pointer;\n position:absolute;\n right: "+right+"px;\n top: "+top+"px;\n}"); styleSheet.appendChild(text); document.head.appendChild(styleSheet); styl.className = styl.className + " b-close"; }

Answer 3

你可以添加一个CSS类（并在样式表中设置样式而不是你的javascript）。

这是一个例子（有多种方法可以做到，但我不知道你想要达到的目的）：

＆＃13;

function highlight(){
  var target = document.getElementById("header");
  target.className = target.className + " highlighted";

}

var btn = document.getElementById('add-class');

btn.addEventListener('click', highlight);

＆＃13;

.highlighted {
  /*Your CSS*/
  background-color: red;
}

＆＃13;

<h1 id="header">Lorem</h1>

<button id="add-class">Click me</button>

＆＃13;

编辑：如果你想使用jQuery，它甚至更简单：

＆＃13;

$(document).ready(function() {
   $('#add-class').on('click', function() {
     $('#header').toggleClass('highlighted');
   });
});

＆＃13;

.highlighted {
  /*Your CSS*/
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="header">Lorem</h1>

<button id="add-class">Click me</button>

＆＃13;

如何动态添加CSS类并在JavaScript中实现其样式

3 个答案: