Greasy Fork

Style one element if other has attribute

I'd like to write a script that will style (with css code) one element, but only then when another has a certain attribute. Could someone write me a sample script for that?
I have a tree like that:
MainWindow
-MainBox
--Box1
--Box2
---BoxA
----ElementX
---BoxB
I want to style Box1 or BoxA when ElementX has (or doesn't have) a certain attribute.
But I thought about it and maybe the most convenient solution would be that if ElementX has a certain attribute then MainBox should get a new attribute, thanks to that I could style any element without a problem.

i think you talk about next html struct

then, you can do the following

// to select any element:
var elem = document.getElementById('ElementX'); 

// to select any attribute of the element:
var attr = elem.getAttribute('data-attr');

// to check if has the attribute (with whatever value)
if(attr !== null)
{
  // //or use this if you want to compare if it has the desired value
  //  if(attr == 'certain-attr')

  // finally, you can set a new attribute to any other element
  document.getElementById('Box1').setAttribute('data-new-attr', 'some-value');
  // or modify the style
  document.getElementById('BoxA').style.display = 'none';
}

@leoncastro I've tested it in many cases and doesn't work at all.

it works. this is the test that confirms: https://jsfiddle.net/gdm1njem/

if you got a real html struct, or you explain with a real example, we can help you better

my example is a base to show you how to do it, using functions like getElementById or setAttribute

@leoncastro I don't even how to use that test. Now I want to remove one attribute if has a certain another. I'd like to remove tooltip attribute from navigation toolbar button if it's disabled (attribute[disabled="true"]).

to remove an attribute, the function is removeAttribute
use something like this:

var elem = document.getElementById('navigation'); 
var attr = elem.getAttribute('disabled');

if(attr !== null)
{
 if(attr == 'true')
  elem.removeAttribute('tooltip');
}

It still doesn't work. Am I doing something wrong?

what are you doing really ?
post your code or post a link

@leoncastro

you are triyng to access a chrome:// special page, and greasymonkey does not allow to access this. see help only about:blank is allowed and only when explicitly included. see discussion here you will have to write a browser extension to access chrome://

@leoncastro Browsers interface is placed there, so what should I put there to affect interface? If I don't put anything, it doesn't work either.

as i said, you cannot edit browsers interface with an userscript, you will have to write a full extension for this purpose. userscripts are only for edit page contents, not aplications nor extensions.

Another case. In Skype Web I'd like to change text color to gray for unsent messages. I have a tree like this:
SWX-MESSAGE
- .bubble
- .DeliveryStatus
-- .presenceStroke
The only way to determine if message is unsent is if .presenceStroke is present (otherwise there's a different class). The color can be changed in .bubble element.