www.webdeveloper.com
Results 1 to 7 of 7

Thread: CSS for Object Display

Hybrid View

  1. #1
    Join Date
    Feb 2014
    Posts
    16

    CSS for Object Display

    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 !

    HTML Code:
    <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>

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    To output each property value on a new line you can use the <br /> tag like this:

    Code:
    for(var x in invoice){
    document.write(invoice[x] + "<br />");
    invoice[x].className="yo";
    To manipulate css with JavaScript you have to use the style property or you can have multiple classes for the desired element in your css file and then change class name using the JavaScript. Here' some simple example to help you:

    HTML Code:
    <!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:
    var e = document.getElementById('test');
    
    //Use style property
    e.style.color = "red";
    
    //Change elemenet class dynamically 
    e.className = "dynamic";
    Last edited by tech_soul8; 07-02-2014 at 08:30 AM.

  3. #3
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Code:
    invoice[x].className="yo";
    You can not use the className property on JavaScript objects. You have to get one of html element/s and apply desired style on them, not the JavaScript object.
    Last edited by tech_soul8; 07-02-2014 at 08:31 AM.

  4. #4
    Join Date
    Feb 2014
    Posts
    16
    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

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Quote Originally Posted by bennykedmi View Post
    I'm not sure that I understood the "Change element class dynamically". I'll try to ask this:
    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 ?
    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.

    HTML Code:
    <!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>

  6. #6
    Join Date
    Feb 2014
    Posts
    16
    Dear friend,

    Thank you very much for your explanation.
    Now I understand.
    I really appreciate your help !

  7. #7
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    You're welcome!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles