使用带有CSS值的js if / else

Question

我不是一个真正的程序员，但我必须根据我们的需要更改一些html / css / js代码..而且我正在努力。

我们正在使用云端软件，它可以关闭源代码，但可以更改部分HTML前端。

该软件使用CSS类“dom-admin”来隐藏非管理员的一些设置。

<div class="dom-admin"> hidden for non-admins </div>

如果用户登录，则显示属性由系统设置为display:none;

.dom-admin {
    display: none;
}

这些隐藏字段主要是输入字段。我们不想为用户隐藏这些字段，我们只想设置字段readonly。

我的想法是在if / else查询中读取javascript中的显示值：

if (dom-admin('display') == 'none') 
{ document.write('<input type="text" id="XX">') }
else
{ document.write('<input readonly type="text" id="XX">') }

我的问题是访问显示值，我在网上试了x个例子，但我从来没能读过“dom-admin”的属性，例如：

document.getElementById('dom-admin').style.display

Chrome Javascript控制台： 未捕获的TypeError：无法读取null的属性'style'

Chrome开发工具向我展示了关于“dom-admin”CSS：

我感谢任何帮助...... 谢谢，帕特里克

Answer 1

阶段1：显示所有隐藏字段

<小时/>

具有Common ClassName的多个元素

班级.dom-admin仅仅是表现性的，它不是一种安全措施。如果要访问className为dom-admin的多个元素，则必须将它们收集到NodeList / HTMLCollection中：

var DOMObjects = document.querySelectorAll('.dom-admin');

OR

var DOMObjects = document.getElementsByClassName('dom-admin');

使用此列表，您必须通过*.dom-admin循环或数组方法迭代/循环遍历每个for（如果后者可能需要将列表转换为数组）：

for (let i=0; i < DOMObjects.length; i++) {...

OR

DOMObjects.forEach(function(DOMObj, index) {...

要反转.dom-admin的样式，您可以将每个*.dom-admin style对象设置为：

DOMObj.style.display = "block"

或删除.dom-admin类：

DOMObj.classList.remove('dom-admin')

具有ClassName的单个元素

最直接的方法是通过querySelector()或getElementsByClassName()[0]定位className：

var DOMObj = document.querySelector('.dom-admin');

OR

var DOMObj = document.getElementsByClassName('dom-admin')[0];

阶段2：将所有显示的字段设置为不可编辑

<小时/>

设置/获取/更改元素属性

id，class，readOnly等称为属性。所需属性具有布尔值（true / false）。 readonly之类的属性只需要存在于标记上，以使其为真。实际上并没有在标签中使它变得虚假。

设置属性 更具体地说，在元素之前不存在时向元素添加属性：

DOMObj.setAttribute('readonly', true);

获取属性 查找属性并读取所述属性的值：

DOMObj.getAttribute('readonly');

更改属性 如果该属性已存在且需要更改值：

DOMObj.removeAttribute('readonly')

请记住，您正在处理的属性具有布尔值，因此其处理方式与具有字符串值的属性的处理方式不同。

DOMObj.setAttribute('name', 'foo'); /*OR*/ DOMObj.name = "foo"

DOMObj.getAttribute('name');

DOMObj.setAttribute('name', 'bar') /*OR*/ DOMObj.name = 'bar'

注1

方法querySelector() / querySelectorAll()的语法：

document.querySelector('.dom-admin')

CSS Selector =========== ^ ----- ^ [类为点]

与方法getElementsByClassName()的语法不同：

document.getElementsByClassName('dom-admin')

DOMString ==================== ^ ------ ^ [无需点]

document.getElementsByClassName('dom-admin')[0]

DOMString ==================== ^ ------ ^ === ^ - ^ [无需点] ==

[如果只有一个目标，则需要索引值为零的括号表示法]

<小时/>

注2

除非您打算销毁网页上的所有内容，否则请勿使用document.write。

如果您的输入嵌套在div.dom-admin中，则表示这些输入已存在 ，但用户无法看到 。没有必要创建它们，即使您确实需要创建任何元素，也不要使用document.write。而是在您打算用作容器的元素上使用createElement()或使用innerHTML。

---

演示

// Collect all .dom-admin into NodeList
var das = document.querySelectorAll('.dom-admin');

// forEach() .dom-admin, remove the class .dom-admin
das.forEach(function(da, idx) {
  da.classList.remove('dom-admin');

  // Find all inputs in the div formerly known as .dom-admin
  var inputs = da.querySelectorAll('input');

  /* forEach() input nested within the div formerly known 
  || as .dom-admin, set its attribute readonly to true
  */
  inputs.forEach(function(input, index) {
    input.setAttribute('readonly', true);
  });
});

.dom-admin {
  display: none;
}

input {
  font: inherit;
  width: 40%
}

<div class="dom-admin">
  <input type='text' value='These inputs exist already'>
  <input type='text'>
</div>

<div class="dom-admin">
  <input type='text' value='Do not use document.write'>
  <input type='text' value='it will overwite EVERYTHING'>
  <input type='text' value=''>
</div>

<div class="dom-admin">
  <input value='Fun fact:'>
  <input value='input by default is type="text"'>
  <input>
</div>

Answer 2

这就是我过去想要的东西。

正如其他人所提到的，使用document.querySelector('.dom-admin')来访问该类，当您更改display样式时，可以使用if语句

let admin = document.querySelector('.dom-admin');
if (admin.style.display === 'none') {
  document.write('<input type="text" id="XX">');
} else {
  document.write('<input readonly type="text" id="XX">');
}

.dom-admin {
  width: 200px;
  display: none;
}

<div class="dom-admin">
  <form action="#">
    <input type="text" id="user" />
    <input type="number" id="user_number" />
    <input type="password" id="user_password" />
    <input type="submit" id="submit" />
  </form>
</div>