Question

我刚刚看了一下关于这个变化功能的相同主题.. 但是我没有找到关于在一段时间内更改CSS属性和属性的信息......或者在谷歌搜索中，它们只是一个变化..

让我更详细一点

我有1个设计，它现在在html，css，js编码，这个设计是1或2个颜色..需要改变的是COLOR（主要）和BoxShadow的颜色例如..所有这些只是需要更改的颜色.. 2 DIV与框阴影和身体背景颜色.. [每个div有背景颜色/颜色/框shodow颜色]

显然我的意思是执行某些功能来为一些css

的ID做一组属性

[还有一个问题：我可以使用一种方法在JS文件中执行此操作，并且在加载它时加载它并且在单击时函数是相同的......这里是一个注释（如何在分离的文件中将JS连接到CSS ？ - 或者在HTML中加载时它们是好的）]

如果点击链接[EX]改变背面颜色，内容，标题，设计
[我可以混合LESS功能和javascript＆gt;如果点击加载LESS中的特定功能并更改ID或CLASS的att和属性？ ]

最诚挚的问候。感谢

============== 代码是这样的（HTML）：

    <body>
    <div id="back">
        <div id="wrapp">
            <div id="logo"></div>
            <div id="content">
                <div id="title"><span>TEXT</span></div>
                <div id="count">
                    <div class="wrapper">
                      <input type="text" id="gig" onkeypress="searchKeyPress(event);">
                      <input type="button" id="btn" value ="Go" onclick="doClick();"/>
                    </div>
                </div>
                <div id="result">
                    <script src="count.js"></script>    
                </div>
            </div>
            <div id="designed">
            </div>
        </div>
    </div>

</body>

（CSS）

html, body {
  padding: 0;
  margin: 0; 
}
*:focus {
  outline: none;
  box-shadow: 0px 0px 8px #F2786C;
 -moz-box-shadow: 0px 0px 8px #F2786C;
 -webkit-box-shadow: 0px 0px 8px #F2786C;
 transition: 0.3s;
 -webkit-transition: 0.3s;
}

::selection {color:#C73829;background:#f39c12;}
::-moz-selection {color:#C73829;background:#f39c12;}

#back {
 background: #e74c3c;
 position: fixed;
 width: 100%;
 height: 100%;
}

#wrapp {
 width: 600px;
 margin: 0 auto;
}

#logo { 
 width: 100%;
 background: url(logo.png) center no-repeat;
 width: 100%; height: 128px;
 background-position: 230px;
 margin: 100px 0 0 0;
 opacity: 0.5;
}

#content {
 background: #DA4434;
 border-radius: 6px;
 width: 600px;
 height: 300px;
 margin: 45px 0 0 0;
 box-shadow: 6px 6px 2px 2px #C73829;
}

#title {
 width: 100%;
 font-family:'Far.TwoLight',Tahoma, Sans-Serif;
 font-size: 20px;
 float: left;
 text-align: center;
 color: #8A2626;
 margin: 20px 0 0 0;
}

#big { 
 font-size: 22px;
}

#count {
 width: 100%;
 float: left;
 margin: 40px 0 20px;
}

.wrapper {
  width: 100%;
  margin: 0 200px;
}

.wrapper1 {
  width: 100%;
}

#gig {
  background: #C73829;
  border: 0;
  border-radius: 4px;
  width: 145px;
  height: 60px;
  font-size: 27px;
  text-align: center;
  color: #8A2626;
}

#btn {
 background: #C73829;
 border: 0;
 border-radius: 4px;
 width: 60px;
 height: 30px;
 font-family:,Tahoma, Sans-Serif;
 font-size: 14px;
 margin: 0 0 0 10px;
 color: #8A2626;
}

#result {
 width: 100%;
 float: left;
 font-family:Tahoma, Sans-Serif;
 font-size: 26px;
 text-align: center;
 margin-top: 0;
 color: #8A2626;
}

#infos {
 background: #DA4434;
 border-radius: 6px;
 margin: 20px 0 0 0;
 box-shadow: 6px 6px 2px 2px #C73829;
 width: 100%;
 font-family:,Tahoma, Sans-Serif;
 font-size: 20px;
 text-align: center;
 color: #8A2626;
}

#designed { 
 background: #DA4434;
 border-radius: 6px;
 margin: 20px 200px;
 box-shadow: 6px 6px 2px 2px #C73829;
 width: 200px;
 font-family:Tahoma, Sans-Serif;
 font-size: 14px;
 text-align: center;
 padding: 10px 0;
 color: #8A2626;
}

Answer 1

要做到这一点会非常简单。

有两种方式，一种是

var styles = {
  backgroundColor : "#ddd",
  fontWeight: ""
};
$(".foo").css(styles);

或者更直接的版本：

$(".foo").css({backgroundColor: "#ddd", borderLeft: "5px solid #ccc" })

这是来自官方的jQuery文档。（http://api.jquery.com/css/#css-properties）

使用Javascript或JQuery更改css属性和属性的更改组

1 个答案: