CSS for Object Display

@bennykedmiJul 02.2014

Hi,

I have an object called “invoice” and I want to print the output x.
in addition I want to edit the printout using CSS and I don’t know how.
Right now everything display inline without any spaces and I want to change it to be one by one horizontally and font color red.

This is how I try unsuccessfully…. to do that.
any idea for help ?

Thanks in advanced !

[code=html] <head> <meta charset=”utf-8″> <style> .yo{ color:red; } </style> </head>

<body>

<script> var invoice=new Object(); invoice.height=30; invoice.width=50; invoice.approve=false; invoice.number=”1140001764″;

for(var x in invoice){ document.write(invoice[x]); invoice[x].className=”yo”; }

</script>

</body>

[/code]

to post a comment

JavaScript

6 Comments(s) _↴

@tech_soul8Jul 02.2014 — #To output each property value on a new line you can use the [I]<br />[/I] tag like this:

<i>
 </i>for(var x in invoice){
 document.write(invoice[x] [COLOR="#FF0000"]+ "&lt;br /&gt;"[/COLOR]);
 invoice[x].className="yo";

To manipulate css with JavaScript you have to use the [I]style[/I] property or you can have multiple classes for the desired element in your [I]css[/I] file and then change class name using the JavaScript. Here' some simple example to help you:

[code=html]
 <!doctype html>
 <html lang="en-US">
 <head>
 
 <title>Test</title>
 <meta charset="UTF-8" />
 
 </head>
 
 <body>
 <p id="test" class="test">Some simple text!</p>
 </body>
 
 </html>
 [/code]

<i>
 </i>var e = document.getElementById('test');
 
 //Use style property
 e.style.color = "red";
 
 //Change elemenet class dynamically 
 e.className = "dynamic";

@tech_soul8Jul 02.2014 — #

<i>
 </i>invoice[x].className="yo";

You can not use the className property on JavaScript objects. You have to get one of [I]html element/s[/I] and apply desired style on them, not the JavaScript object.

@bennykedmiauthorJul 02.2014 — #Hi,

Thanks for your answer.

I'm not sure that I understood the "Change element class dynamically". I'll try to ask this:

If for example I want to display all the parameters of the Object in my HTML and put all of them in one border and style it with yellow background. Is it possible ? and if so, How can I do that ?

many thanks for your help,

Benny

@tech_soul8Jul 02.2014 — #
I'm not sure that I understood the "Change element class dynamically". I'll try to ask this:
[/QUOTE]

What I meant to say is that you can define various classes in your css file or in internal style sheet and then use JavaScript to dynamically change class of an element thus affecting its appearance.

If for example I want to display all the parameters of the Object in my HTML and put all of them in one border and style it with yellow background. Is it possible ? and if so, How can I do that ?
[/QUOTE]

This is one way you can achieve what you want. Note that it could be done much better (especially displaying the output) but for demonstration purposes this should suffice.

[code=html]
 <!doctype html>
 <html lang="en-US">
 <head>
 
 <title>Test</title>
 <meta charset="UTF-8" />
 <style>
 div { width: 300px; }
 .clock { background: #dcb6b6; }
 .car { background: #bcc9de; }
 </style>
 
 </head>
 
 <body>
 <h3>Clock properties</h3>
 <div id="clock"></div>
 <h3>Car properties</h3>
 <div id="car"></div>
 <script type="text/javascript">
 //Define two objects
 var clock = {
 Hours: 21,
 Minutes: 45,
 Seconds: 25
 },
 car = {
 Color: "Blue",
 Brand: "Mercedes", // :)
 HP: 420,
 Price: "$300 000"
 };
 
   var clockProp = Object.getOwnPropertyNames(clock);
   var carProp = Object.getOwnPropertyNames(car);
   var clockCont = document.getElementById('clock');
   var carCont = document.getElementById('car');
 
   for (var i = 0; i < clockProp.length; i++) {
   var e = document.createElement('p');
   var txt = document.createTextNode(clockProp[i]);
 
   e.setAttribute("class", "clock")
   e.appendChild(txt);
   clockCont.appendChild(e);
   };
 
   for (var i = 0; i < carProp.length; i++) {
   var e = document.createElement('p');
   var txt = document.createTextNode(carProp[i]);
 
   e.setAttribute("class", "car");
   e.appendChild(txt);
   carCont.appendChild(e);
   };
 </script>
 </body>
 
 </html>
 [/code]

@bennykedmiauthorJul 03.2014 — #Dear friend,

Thank you very much for your explanation.

Now I understand.

I really appreciate your help !

@tech_soul8Jul 03.2014 — #You're welcome!

Also in #JavaScript _↴

Problem getting viewer to load HELP I am new and confused [RESOLVED] Validation script problem in IE7 en IE6

Success!

Help @bennykedmi spread the word by sharing this article on Twitter...

Tweet This

CSS for Object Display

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

CSS for Object Display

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴