Using JS how to change HTML tag attributes (alternative to document.write() )

Question

I am using an outside API that allows me to send extra parameters inside the image src value, like so

<img src="myImage.jpg?resize=width[scrW]">

The problem is that I don't know what the width variable(scrW) is until I start loading the page. I use <script> var scrW = window.innerHtml </script> to get the width I need.

I tried using

<script> 
    document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">')
</script>

but the problem with that is that document.write displays everything in text until the document is ready (or reaches </body>). And that just looks tacky.

My question is: How can I append/prepend JS variables to src attribut values during the page rendering?

Community · Accepted Answer · 2017-05-23 12:24:14Z

1

How about just solving the problem of the text showing up before the page renders? That's easy. Just make sure your code doesn't run until the page's HTML is completely loaded.

Vanilla JS solution:

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here
   document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
})();
</script>

Using jQuery:

<script>
$(document).ready(function() {
  document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
});
</script>

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Feb 10, 2016 at 6:41

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Artur Grigio Over a year ago

I did have to place my API calss after the document.write, but it works :)

M. Awwab Tahir · Accepted Answer · 2016-02-10 06:53:26Z

1

How about you give your image src some default resize value and when the page is loaded it will be updated. I have given the img an id of "myImage" so that I can access that in JavaScript code.

Here is the HTML:

<img id="myImage" src="myImage.jpg?resize=width[180]">

Insert this JavaScript at the end:

<script>var scrW = window.innerHTML;
document.getElementById("myImage").src = "myImage.jpg?resize=width["+scrW+"]";</script>

answered Feb 10, 2016 at 6:53

M. Awwab Tahir

112 bronze badges

Collectives™ on Stack Overflow

Using JS how to change HTML tag attributes (alternative to document.write() )

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related