Results 1 to 2 of 2

Thread: Data type of object style property value

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default Data type of object style property value

    Consider this:

    Code:
    main {
      width: 400px;
      height: 100px;
      border: 1px solid #C3C3C3;
      display: flex;
    }
    main div {
      flex-grow: 1;
    }
    
    <main>
      <div style="background-color:coral;"></div>
      <div style="background-color:lightblue;"></div>
      <div style="background-color:khaki;" id="khaki"></div>
      <div style="background-color:pink;"></div>
      <div style="background-color:lightgrey;"></div>
    </main>
    <input type="number" id="input" value="9" max="9">
    <span id="dataType"></span>
    
    var input = document.getElementById('input'),
      khaki = document.getElementById('khaki'),
      dataType = document.getElementById('dataType');
    input.oninput = function() {
      khaki.style.flexGrow = 10 - this.value;
      dataType.textContent = 'Data type: ' + typeof khaki.style.flexGrow;
    };
    DEMO

    I wonder why it shows the data type of the flex-row property value as string, but if you replace khaki.style.flexGrow with its equivalent 10 - this.value:

    Code:
    dataType.textContent = 'Data type: ' + typeof (10 - this.value);
    it will show the data type as number.
    Can I generalize it and conclude that all objects style property values and all elements attribute values are strings?

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,582
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there Rain Lover,

    Can I generalize it and conclude that all objects style property values and all elements attribute values are strings?
    Yes.

    CSS values are strings even when they have the appearance of numbers.

    coothead
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    Rain Lover (12-17-2015)

Similar Threads

  1. Replies: 1
    Last Post: 02-29-2012, 06:15 PM
  2. Changing <object> tag element's data property dynamically
    By codeexploiter in forum JavaScript
    Replies: 1
    Last Post: 09-15-2009, 12:01 PM
  3. Replies: 1
    Last Post: 05-19-2009, 12:52 PM
  4. Replies: 3
    Last Post: 03-13-2009, 08:24 AM
  5. Object doesn't support this property or method
    By joseph_russell in forum JavaScript
    Replies: 4
    Last Post: 05-03-2007, 07:56 PM

Bookmarks

Posting Permissions

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