Javascript 将js if/else与CSS值一起使用

我不是一个真正的程序员，但我必须根据需要更改一些html/css/js代码。。我在挣扎

我们正在使用一个云软件，它关闭了源代码，但有可能更改HTML前端的某些部分

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

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

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

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

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

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

Chrome开发工具向我展示了“dom管理员”CSS：

我感谢你的帮助。。。

---

谢谢，帕特里克，这是我用来实现你想要的东西

正如其他人提到的，使用

document.querySelector（'.dom admin'）

访问该类，当您更改

display

样式时，可以使用if语句

let admin=document.querySelector（'.dom admin'）；
如果（admin.style.display=='none'）{
文件。写（“”）；
}否则{
文件。写（“”）；
}

.dom admin{
宽度：200px；
显示：无；
}

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

---

具有公共类名的多个元素 类

.dom admin

仅仅是一种表示，而不是一种安全措施。如果要访问类名为

dom admin

的多个元素，必须将它们收集到节点列表/HTMLCollection中：

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

或

---

使用此列表，您必须通过

for

循环或数组方法迭代/循环每个

*.dom admin

（如果使用后者，则可能需要将列表转换为数组）：

---

要反转

.dom admin

的样式，可以将每个

*.dom admin

样式

对象设置为：

DOMObj.style.display = "block"

或删除

.dom admin

类：

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

---

具有类名称的单个元素 最直接的方法是通过

querySelector（）

或

getElementsByClassName（）[0]

以类名为目标：

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

或

---

阶段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（）

/

queryselectoral（）

的语法：

CSS选择器===========^-----^[点代表类]

与方法

getElementsByClassName（）

的语法不同：

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

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

DOMString============================^------^===^-^[不需要点]==

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

---

附注2 不要使用

文档。除非您打算销毁页面上的所有内容，否则请编写
。

如果在
div.dom-admin
中嵌套了输入，则意味着这些输入已经存在，但用户无法看到它们。不必创建它们，即使您确实需要创建任何元素，也不要使用
document.write
。相反，在要用作容器的元素上使用
createElement（）
或使用
innerHTML


演示

//将所有.dom admin收集到节点列表中
var das=document.querySelectorAll（'.dom admin'）；
//forEach（）.dom admin，删除类.dom admin
das.forEach（函数（da，idx）{
da.classList.remove（'dom-admin'）；
//在以前称为.dom admin的div中查找所有输入
var inputs=da.querySelectorAll（'input'）；
/*嵌套在以前已知的div中的forEach（）输入
||作为.dom admin，将其属性readonly设置为true
*/
输入。forEach（函数（输入，索引）{
input.setAttribute（'readonly'，true）；
});
});
.dom admin{
显示：无；
}
输入{
字体：继承；
宽度：40%
}

您正试图使用
getElementById
但HTML是
class=“dom admin”
。类与ID不同。请使用
querySelector
insteadTry或or。如果您使用后端语言来显示或隐藏元素，那将非常棒！因为您说过元素将根据角色有条件地呈现：如果您使用
querySelectorAll
或
getElementsByClassName
您需要通过其索引访问元素，即
document.getElementsByClassName（.dom admin”）[0]
记住要保护服务器端的表单数据。在客户端站点上隐藏/只读输入是一个非常糟糕的主意，可能会导致漏洞。
var DOMObj = document.getElementsByClassName('dom-admin')[0];

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'

document.querySelector('.dom-admin')

document.getElementsByClassName('dom-admin')

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