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，但它们可以是任何元素类型的类。

Answer 2

首先，我可以通过javascript引用和更改类，还是元素必须具有特定的ID？

不确定你的意思，但有几种方法。假设类 foo ，

使用您的班级获取所有节点的 NodeList

var list;
list = document.getElementsByClassName('foo');
// or
list = document.querySelectorAll('.foo'); // etc

将新样式应用于与您的班级相匹配的所有节点

// independentally for each node
var i;
for (i = 0; i < list.length; ++i)
    list[i].style.bar = baz;

将新的 CSSRule 应用于与您的班级匹配的所有节点

// all nodes in one rule using a <style>
var style, sheet;
style = document.createElement('style'); // or some existing <style>
document.head.appendChild(style); // don't append if exists already
sheet = style.sheet; // access sheet from <style>
sheet.insertRule('.foo { bar: baz; }', Infinity);
// using index Infinity will always append as the last rule

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

2 个答案: