javascript - 使用 js if/else 和 CSS 值

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 控制台:未捕获的类型错误:无法读取 null 的属性“样式”

Chrome 开发工具向我展示了有关“dom-admin”CSS 的信息:

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

Answer 1

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

---

具有共同类名的多个元素

.dom-admin 类只是展示性的，它不是安全措施。如果你想访问多个类名为 dom-admin 的元素，你必须将它们收集到一个 NodeList/HTMLCollection 中:

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

或

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

---

使用此列表，您必须通过 for 循环或数组方法(如果后者是列表可能需要转换为数组):

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

或

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

---

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

DOMObj.style.display = "block"

或删除 .dom-admin 类:

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

---

带有类名的单个元素

最直接的方法是通过 querySelector() 或 getElementsByClassName()[0] 获取类名:

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

或

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

---

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

---

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

id、class、readOnly等称为属性。所需的属性具有 bool 值 (true/false)。诸如 readonly 之类的属性只需要存在于标签上即可使其为真。实际上不在标签中当然会使它错误。

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

DOMObj.setAttribute('readonly', true);

---

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

DOMObj.getAttribute('readonly');

---

更改属性如果属性已经存在并且需要更改值:

DOMObj.removeAttribute('readonly')

---

请记住，您正在处理的属性具有 bool 值，因此它的处理方式不同于具有字符串值的属性。

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 选择器 ===========^-----^[类的点]

不同于方法 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>