javascript - 是否可以通过函数更改类的样式属性？

Question

首先，我能否通过 javascript 引用和更改类，或者元素是否必须具有特定的 id？

我有一个可提交的表单，它堆叠在文本信息的静态 div 旁边。成功提交后，表单淡出并在表单位置显示一条确认消息。但是，由于此确认消息的长度(长度/高度)远不及表单的长度，因此我的静态元素上的左手边框与其他元素重叠。

我想做的就是用淡入淡出去除这个边框。在 JS 中，我尝试将正确的类设为变量，然后对其进行内联样式设置。但它似乎没有用。

我是不是指错了？ (下面注释掉了)

我认为另一种解决方法可能是在淡入淡出后将该类重命名为新的名称，然后在我的 css 中复制之前没有边框的所有内容。但这对于可能相当简单的事情来说似乎相当奢侈。

编辑:我仍然没有真正理解它。由于此功能实质上是检查 cookie(如果表单之前已完成)，是否会在制作 cookie 时对样式进行更改？此外，样式需要从我的 style.css 文件中引用，而不是内联样式。只是为了测试，我设置了第二种样式以将边框更改为另一种颜色，而不是将其全部消失。

编辑 2:修复了我想做的事情将在早上更新。

HTML

<div class="contactusside">
<p>Some Text</p>
</div>

CSS

.contactusside{
  width: 230px;
  float: right;
  margin-left: 0px; 
  margin-right: -10px;
  padding-right: 0px;
  padding-left: 15px;
 border-left: 1px solid #eee;
}

.contactusside2{
  width: 230px;
  float: right;
  margin-left: 0px; 
  margin-right: -10px;
  padding-right: 0px;
  padding-left: 15px;
 border-left: 2px solid #FFF000;
}
.contactusside h2{
  border-bottom: 1px solid #777;
  padding-bottom: 4px;
}

JS

$(function() { 
var completed = $.cookie( 'completed' ),
form = $('#contactform'),
msg = $('#contactf'),
sid = $('.contactusside');

if( ( completed != undefined ) && ( completed == 'done' ) ) {
form.hide();
msg.html('<h2 class="green">Success</h2>Thankyou for submitting the form. We will get back to you as soon as possible.' );
sid.toggleClass('contactusside2');
}
});


           

Answer 1

因为您已经在使用 jQuery，请记住您可以通过除 id 以外的其他方式进行选择。

$('.class-name') //Selects all items with given class
$('div') //Selects all divs (think of the whole world of CSS style selectors)

我建议，如果您正在谈论的所有元素都有一个给定的类，或者可以通过其他方式选择，并且如果您想临时修改它们，那么您可以通过切换它们的另一个类来实现...例如在您想要替代样式的期间的开始和结束时。

$('div.some-class').toggleClass("some-class-alternate-style");

html:

<div class="some-class"> This is a box</div>
<div class="some-class"> This is yet another box</div>

我在这里使用的是 div，但它们可以是任何元素类型的类。