target element in modal to change style-CodePudding

I have a link on a page that opens a modal that has 3 buttons. I want to change the font of one of those buttons to a different size. I can't change the code on the page, but I can add javascript/jquery to a js file that the page uses. What I have doesn't seem to be working correctly because when the page loads, the modal content is not known yet so when the user hits the page the source shows this:

<div id="aModal">
  <div id="modalContent">
    <div id="modalBody">
      <div id="acctContent"></div>
   </div>
 </div>

then after clicking the link it shows this:

<div id="aModal">
  <div id="modalContent">
    <div id="modalBody">
      <div id="acctContent">
        <div style="min-width: 300px;">
          <button >some text here</button>
          <button >some other text here</button>
          <button >some different text here</button>
        </div>        
      </div>
    </div>
  </div>

here is the javascript I'm using:

<script>
var targetButton = document.getElementById("acctContent").getElementsByClassName("modal-item");
var sContent = "some different text here"
for (var i=0; i <= targetButton.length; i  ) {
    if (targetButton.innerHTML = sContent) {
        targetButton.style.fontSize = "small";
    }
}
</script>

Is it possible to case the javascript to be triggered maybe upon clicking the link? Or any other solution? I also have access to change the css, except there is nothing specific about the button besides the text content, I won't know how many buttons will display. Thanks!

CodePudding user response：

Can you add CSS to the page? If so, you can use a CSS selector to target the button and apply the CSS styles you need.

So, for example, to target the 2nd button:

#aModal button.modal-item:nth-of-type(2) {
  font-size: 24px;
}

EDIT: OK, I reread your question and now see you wrote, "I also have access to change the css, except there is nothing specific about the button besides the text content, I won't know how many buttons will display."

I added a question above.

CodePudding user response：

I don't know what needs to trigger this but a CSS rule that acts on a pseudo class like :hover can be applied to any number of elements but will act individually so there is no need to check content.

button.modal-item {
  transition: font-size .25s;
}

button.modal-item:hover {
  transition: font-size .75s;
  font-size: 20px;
}

<div id="aModal">
  <div id="modalContent">
    <div id="modalBody">
      <div id="acctContent">
        <div style="min-width: 300px;">
          <button >some text here</button>
          <button >some other text here</button>
          <button >some different text here</button>
        </div>
      </div>
    </div>
  </div>
</div>