admin管理员组文章数量:1391999
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>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.
Share Improve this question edited May 8, 2017 at 6:42 vulcan asked May 8, 2017 at 5:57 vulcanvulcan 331 gold badge1 silver badge6 bronze badges 4-
If you only want to give color to
#status(you have a proper selector), why don't you use css instead? – Abhishek Pandey Commented May 8, 2017 at 6:03 - It is not remended to use CSS classes for emails. Everything must be inline CSS – vulcan Commented May 8, 2017 at 6:15
- You should have mentioned this in Question. – Abhishek Pandey Commented May 8, 2017 at 6:17
- Sorry i missed it :( and someone downvoted the question as well – vulcan Commented May 8, 2017 at 6:18
4 Answers
Reset to default 2Add 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.
Wrap JavaScript inside BODY
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.
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.
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.
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>本文标签： javascriptHow to use variables for styles in HTMLStack Overflow
版权声明：本文标题：javascript - How to use variables for styles in HTML - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744581879a2613970.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论