How to use variables for styles in HTML
Question
I have following scenario:
function 1:
myFunction(obj){
//returns HTML code as string
}
Example:
<div> <div style="color: black; margin-bottom: 10px;"> <h3 style="font-size: 15px; display:inline;">Pipeline : </h3> <h3 style="font-size: 20px; display:inline;"> '+obj.name+' </h3> <div id="status" style="display:inline; font-size:10px;"></div> </div> <div style="margin-bottom: 10px;"> <h3 style="font-size: 15px; display:inline;">Status message : </h3> <h3 style="font-size: 20px; display:inline;"> '+obj.statusMessage+' </h3> </div> </div>
function 2: calls function 1 by passing the object;
callmyFunction(){
obj={
"name": "abc",
"statusMessage" : "fdsffs"
...
}
var str = myFunction(obj);
document.getElementById("demo").innerHTML=str;
}
My html has a div with id = "demo"
<div id="demo"></div>
Now i want to dynamically change the color of a div with id = "status" from myFuncton() which is part of the HTML string returned. Something like this: (But this throws error 'Cannot read property 'style' of null at myFunction (:17:34)')
document.getElementById("status").style.color=variable;
Here variable is decided based on the obj properties dynamically (obj is passed as parameter)
If there is a way to bind variables to style property in the string returned then the problem would be solved
like:
<div id="status" style="display:inline; font-size:10px; color=
{{variable}}"></div>
I cannot use CSS classes because it is for emails. And i know i can use CSS for any other case.
And the above code is pseudo code. Dont look for syntac errors.
4 answers
solution1
1 2017-05-09 03:24:59
The error you got ( Cannot read property 'style' of null ) means your code document.getElementById("status") is returning null . In other words, the div with the id status does not exist in the DOM at the time you call your function myFunction() .
document.getElementById() looks for elements in the DOM, not in a random Javascript variable you would call str . If it is not in the DOM - in your html document - the function will not find it.
solution2
1 ACCPTED 2017-05-09 03:45:13
Add your JavaScript inside the <body> area. When you run the function, the DOM is not finding any element with id status and returning as null . If you move your scripts inside the body content it will work. Look at the following fiddle.
In the above fiddle, I have chosen the JavaScript Load Type as No wrap - in <body> and i can able to see the colour changes. If I change the Load Type to No wrap - in <head> then I am getting the null error.
solution3
0 2017-05-08 06:04:03
Why not using CSS classes? That is what they are for. You define your styles in your stylesheets. And then you add the relevant classes using javascipt ( document.getElementById("status").classList.add("js-red-color") ).
I usually prefix my css classes with js- so I know they are added dynamically.
solution4
0 2017-05-08 06:26:29
You missed function keyword before your function name. Please check below code snippet.
function myFunction(obj){ var str = ' \\ <div> \\ <div style="color: black; margin-bottom: 10px;"> \\ <h3 style="font-size: 15px; display:inline;">Pipeline : </h3> \\ <h3 style="font-size: 20px; display:inline;"> '+obj.name+' </h3> \\ <div id="status" style="display:inline; font-size:10px;"> red colored div </div> \\ </div> \\ <div style="margin-bottom: 10px;"> \\ <h3 style="font-size: 15px; display:inline;">Status message : </h3> \\ <h3 style="font-size: 20px; display:inline;"> '+obj.statusMessage+' </h3> \\ </div> \\ </div>' ; return str; } function callmyFunction(){ obj={ "name": "abc", "statusMessage" : "fdsffs" }; var str = myFunction(obj); document.getElementById("demo").innerHTML=str; } //calling callmyFunction() on load callmyFunction(); document.getElementById("status").style.color='black'; alert('Changing color to red'); document.getElementById("status").style.color='red';
<html> <head> </head> <body> <div id="demo"></div> </body> <!-- script tag goes here --> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.