Develop Reference

Cannot apply style to dynamically created elements in javascript

I have the following code:
let dynel = document.createElement('div');
dynel.className = 'foo';
dynel.style.width = '5px';
dynel.style.height = '5px';
dynel.style.backgroundColor = 'blue';
document.body.appendChild(dynel);
This code works as I expect it to, after appending the dynamic element to the document, a 5 x 5 blue box appears. The problem starts when I try to access the element via its className to style it further:
var foo = document.getElementsByClassName('foo');
foo[0].style.top = '50px';
foo[0].style.left = '200px';
This code should position the box but it does nothing, what am I doing wrong? Preferably I'm looking for a pure JS solution so no JQuery.
Thanks in advance :)

Problem
The default value of the property position of a div is static. When you try to set left/right [..] on static element it has no effect on that element.
static : every element has a static position by default, so the
element will stick to the normal page flow. So if there is a
left/right/top/bottom/z-index set then there will be no effect on that
element. relative : an element's original position remains in the flow
of the document, just like the static value.
Solution
You have to set the position property in your created element to absolute, fixed or relative.
let dynel = document.createElement('div');
dynel.className = 'foo';
dynel.style.position = "absolute"
dynel.style.width = '5px';
dynel.style.height = '5px';
dynel.style.backgroundColor = 'blue';
document.body.appendChild(dynel);
var foo = document.getElementsByClassName('foo');
foo[0].style.top = '50px';
foo[0].style.left = '200px';

top, left, right, bottom works on those elements in which position property is not static. But either absolute or relative or fixed.
As per your requirement use any of the 3 values in your CSS and styles will start to apply. Something like this would work (But it depends how you want you implemention of the code)
var foo = document.getElementsByClassName('foo');
foo[0].style.position = "relative";
foo[0].style.top = '50px';
foo[0].style.left = '200px';
NOTE: position:fixed and position:absolute would get your element out of the normal code flow and you will have to adjust accordingly.

You need to ensure that foo[0] has the position: absolute; style set.

I was inspired by #Imran Rafiq Rather to give the details example for each situation:
relative
If you just want to adjust position a little bit relative to its default position, use key word "relative"
Default position is 'static' position
var foo = document.getElementsByClassName('foo');
foo[0].style.position = "relative"; // works almost the same as default or 'static', because 'relative' is relative to it's 'static' position.
foo[0].style.top = '50px';
foo[0].style.left = '200px';
https://codepen.io/hoogw/pen/QWqRdBY
absolute
we usually want to relative to its parent div, should use 'absolute'
var foo = document.getElementsByClassName('foo');
foo[0].style.position = 'absolute'; // relative to its parent div
foo[0].style.top = '50px';
foo[0].style.left = '200px';
https://codepen.io/hoogw/pen/GRMaWKB?editors=1100
fixed
If you want to relative to whole page, use 'fixed'
var foo = document.getElementsByClassName('foo');
foo[0].style.position = 'fixed'; // relative to whole page, whole html body document
foo[0].style.top = '50px';
foo[0].style.left = '200px';
https://codepen.io/hoogw/pen/yLzWMvJ
Here is link to document https://developer.mozilla.org/en-US/docs/Web/CSS/position

How I can get css property and change the height of html element by javascript

I try to create a div element and read height from a CSS selector. finally change the div elemet height by javascript. When I use div.style.height ='15px'; work correctly but I want change height dynamically because my CSS class will change by responsive function.
My CSS is:
#indicator {
width: 15px;
height: 15px;
}
And I use this code for Script:
div = document.createElement("div");// valve_indicator
div.style.border = '1px solid #b3280a';
div.style.height =document.getElementById('indicator').style.height; // instead div.style.height ='15px';
div.style.width = '15px';
cell.appendChild(div); // cell is a table cell
But document.getElementById('indicator').style.height return null.
please help me thanks in advance

Remove the # in #indicator. getElementById() doesnt need # sign before the id name
document.getElementById('indicator').style.height
And if you want to dynamically change the indicator height:
let indicator = document.getElementById('indicator');
indicator.addEventListener("change", function(){
div.style.height = indicator.style.height;
})

I solve my problem by use this code
div.className='indicator';

How to change div img when scrolling down a page

Pretty simple javascript issue that I am not sure how to do:
When scrolling down on the website:
http://cerebral-supplements.myshopify.com/ (use password "aiglog")
the header shifts up into a minimalistic design. As the logo is too big it sticks out.
What javascript code would be needed to change the logo's div properties to resize the image?
Thanks

If you can add custom CSS, add the following:
/* scale logo down to ~75% size when scrolled sidebar is activated (fadeInDown class) */
.fadeInDown .template-logo img {
width: 225px;
height: 61px;
}

modify the functions values to your needs.
function onScrollChange()
{
if ( document.body.scrollTop > 500 ) {
var divElement = document.getElementById('divID');
// either change style properties directly
divElement.style.width = '100px';
divElement.style.height = '100px';
// or change the div's css class
divElement.classname = 'smallLogoClass';
}
}
than register it, so it executes on each scroll.
document.addEventListener('scroll', onScrollChange);

Hold scroll bar always at the bottom

I have a div element and a simple style sheet for it :
CSS:
.container{
width:200px;
max-height:200px;
border:1px solid red;
overflow-y:scroll;
}
HTML:
<div class="container">
</div>
And i have a button for add contents to the div, as you know my div's height grows then has an scroll bar.
When i add new contents to the container, i want to show the last added item.
I try to use scrollTop() jQuery function with infinite value but it didn't work.
Any Idea?
The Fiddle
Edit : Because of using max-height, the maximum value of height property is 200.
So i can't use this approach :
$(".container").scrollTop($(".container").heigth());
Now, i can do it like this:
$(".container").scrollTop(10000);
And it's working, but i think it isn't good idea!
Update
Thanks to Nicole Van for the simple and great approach!
I change my fiddle with her solution : The Updated Fiddle

function ScrollToBottom(){
var d = document.getElementById("MyDiv");
d.scrollTop = d.scrollHeight;
}
Take a look at some other jQuery solutions here:
Scroll to bottom of div?

How are you adding? appending or preppending?
I mean you could get the new height of your container and scrollTo your new height if appending or scrollTo 0 if preppending
---EDIT this makes the trick:
$(".add").click(function(){
i++;
var s ="<p>added value "+i+" ! </p>";
$(".container").append(s);
var heightContainer = $(".container").height();
$(".container").scrollTop(heightContainer);
});
-----EDIT-------
This makes it, it overpass allways its innerheight so it works, even its not accurate:
var i=0;
$(".add").click(function(){
i++;
var s ="<p>added value "+i+" ! </p>", heightContainer;
$(".container").append(s);
heightContainer = $(".container").height() * i;
$(".container").scrollTop(heightContainer);
});
The ideal solution is that you know the height of the elemnts you are inserting so the heightContainer will be elemHeight * i

Can a DIV's CSS attribute be changed dynamically by javascript just by knowing it's class?

I have this div:
<div class="galleria-info" style="">
<div class="galleria-info-text">
<div class="galleria-info-title" style="">#test</div>
</div>
</div>
And I have this CSS for it:
.galleria-info {
width: 100%;
top: 290px;
left: 330px;
z-index: 10;
position: absolute;
}
What I would like to do is somehow thru javascript change the left attribute of the galleria.info div dynamically so that based on the length of the text for #test i can position the div far enough left to make room for it on screen.
I write different information where the word #test is at in the HTML dynamically and it doesn't have an ID only class.
Any clues or help will be mega-appreciated!

document.getElementsByClassName('galleria-info')[0].style.left = '300px'; // or whatever you want

You have two questions; I have two answers.
Getting by Classname
getElementById() gets the element by its id, getElementsByTagName()[] gets the element by tag name, and to get it by class name, use:
document.querySelectorAll("galleria-info")
Setting the Position
Sorry I used getElementById and getElementsByTagName instead of querySelectorAll.
right Attribute
Wouldn't a right attribute be more appropriate? You could get the width of the body (or container) and subtract however much you want from that instead.
var body_width = document.getElementsByTagName('body')[0].style.width;
var body_width = parseFloat(body_width);
document.getElementById('galleria-info').style.right = (body_width - 600) + "px";
Fixed-Width Font
But, if you are using a fixed-width font, then you can get the length of the string, multiply by the width of each character, and then set style.left to that minus the max distance it can reach (i.e. 300px.)
var str_length = document.getElementById('galleria-info').innerHTML.length;
var str_length = str_length * 10; // Or whatever the fixed width is
document.getElementById('galleria-info-text').style.left = (300 - str_length) + "px";
Wrapper
This doesn't use JavaScript, which, in my opinion, is a good thing because users can disable JavaScript. You can have a wrapper div around the original div that has the following CSS:
#galleria-info-wrapper {
width:300px;
text-align:right;
}
#galleria-info {
text-align:left;
}