title: Use js if/else with CSS value
body: <p>I'm not really a programmer, but I have to change some html/css/js code for our needs.. and I'm struggling.</p>
  
  <p>we are using a cloud software, which closed source, but with the possibility to change parts of the HTML frontend.</p>
  
  <p>the software uses the CSS class "dom-admin" to hide some setting for non-admin.</p>
  
  <pre><code>&lt;div class="dom-admin"&gt; hidden for non-admins &lt;/div&gt;
  </code></pre>
  
  <p>if a user logs in, the display property is set by the system to <code>display:none;</code></p>
  
  <pre><code>.dom-admin {
      display: none;
  }
  </code></pre>
  
  <p>these hidden fields are mostly input fields. we dont want to hide this fields for our users, we just want to set the fields <code>readonly</code>.</p>
  
  <p>my idea is to read the display value within a javascript in a if / else query:</p>
  
  <pre><code>if (dom-admin('display') == 'none') 
  { document.write('&lt;input type="text" id="XX"&gt;') }
  else
  { document.write('&lt;input readonly type="text" id="XX"&gt;') }
  </code></pre>
  
  <p>My Problem is to access the display value, i tried x examples from the net, but i never able to read the property of "dom-admin", eg:</p>
  
  <pre><code>document.getElementById('dom-admin').style.display
  </code></pre>
  
  <p>Chrome Javascript Console:
  Uncaught TypeError: Cannot read property 'style' of null</p>
  
  <p>Chrome dev-tools shows me this about the "dom-admin" CSS:</p>
  
  <p><img src="https://i.stack.imgur.com/qX1P5.png" alt="image"></p>
  
  <p>I appreciate any help...
  Thanks, Patrick</p>