Question

我有一个HTML页面，其中css类用于具有以下定义的控件：

.ms-crm-Inline-Edit select.ms-crm-SelectBox {
border: 1px solid #CCCCCC;
font-size: 12px;
margin: 1px 0 0 1px;
width: 100%;
}

我需要为此类添加一个新属性，如下所示：

height: "120px !important";

这必须通过Javascript完成。我无法修改原始类定义，这就是为什么我必须添加完成此工作的Javascript函数。为此我编写了Jscript方法，但它没有用。

function CustomizePicklistHeight ()
{
   document.getElementsByClassName('ms-crm-Inline-Edit select.ms-crm-SelectBox').style.height = '120px !important';
}

我想，首先我们必须为此类添加height属性，但我不知道如何在JScript中执行此操作。请建议。

Answer 1

document.getElementsByClassName返回该类所有项目的数组。

试试这个：

function CustomizePicklistHeight()
{

// Store elements for each class differently. Just in case :)

var elements1 =  document.getElementsByClassName('ms-crm-Inline-Edit');
var elements2 =  document.getElementsByClassName('ms-crm-SelectBox');

// Since you cant affect the array directly, you use a loop to do the operation on each individual element

for (var i = 0; i < elements1.length; i++)
{
element1[i].style.height = '120px !important';
};

for (var j = 0; j < elements2.length; j++)
{
element1[j].style.height = '120px !important';
};

}

希望这会有所帮助.. :)

Answer 2

  var matches = document.querySelectorAll(".ms-crm-Inline-Edit, select.ms-crm-SelectBox");
  for(i=0; i<matches.length; i++)
  {
    matches[i].style.height = '120px !important';
  }

参考：https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

Answer 3

ClassName表示“类名”（ms-crm-SelectBox）而不是“整个选择器”。（querySelector和querySelectorAll允许您使用完整选择器。
Elements表示“元素”（复数）不是“元素”。它返回一个NodeList，你可以像数组一样循环。

另一方面，如果您想要修改CSS规则集而不是直接应用于HTML元素的样式，那么您需要改为document.styleSheets。

Answer 4

你必须通过设置每个项目来制作一个循环，如果你之前没有“！important”，你就不需要它了。

通过Javascript添加CSS类属性

4 个答案: