www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problems copying some css styles from element to element

  1. #1
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    77

    Problems copying some css styles from element to element

    Hi, I'm trying copy some css styles from an img style attribute to a another span element style. This code allows me to copy the background-color, but not any of the other styles from the img element. Here is an example with the padding style.

    http://jsbin.com/ihucel/16/edit

    As you can see, it returns nothing as the value, whereas changing the padding for background-color in jquery does return a value (sames goes for border -- ie. nothing).
    HTML Code:
    <span class="imgCaption" style="padding:">Alt Caption</span>
    Anyone know why this is so?

    Thanks an advance

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    Unfortunately I cannot access your web page because my antivirus is warning me of potential malware problem is your web site.

    If the CSS in the img tag is not an inline "style" attribute then you will certainly not be able to access the padding or border.
    You will certainly need to go through the 4 values: padding-top, padding-right, padding-bottom and padding-left.
    And the same goes from the border or margin.

    If however the the img tag actually have an inline style="..." attribute, you can just copy the value of that attribute and set it verbatim to the style attribute of your span tag.

    Please copy and paste both the HTML of the img and the span tag in your reply if you need further assistance. I will then be able to determine what the issue is.

  3. #3
    Join Date
    Mar 2010
    Location
    Finland
    Posts
    77
    Hi, sorry to hear you got the attack screen.
    My img element has an inline style with padding and border defined. So like you said, it should work.

    Here is the html
    HTML Code:
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    </head>
      <body>
    
        <p>Paragraph</p>
        
      <img 
        style="padding:10px; background-color:lightgrey; border:green solid;" 
        title="Title Caption" 
        alt="Alt Caption" 
        class="captionImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
        
        <p>Another Paragraph</p>
      </body>
    </html>
    CSS...
    HTML Code:
    .imgWrapper {
      background-color:yellow;
    
    }
    
    .captionImg {
    
    }
    
    .imgCaption {
      padding:0px;
      background-color:orange;
      border:black solid;
      
    }
    and jQuery...
    Code:
    $('img[alt]').each(function() {
     
      var img = $(this);
      
      // create the wrap div
      var theWrap = $('<div class="imgWrapper"></div>');
      // add the wrap div to the DOM
      $(img).after(theWrap);
      
      var captionText = img.attr('alt');
      
      var style = $(this).css("padding");
      // put the content into the wrap div
      $(theWrap).append(img);
      $(theWrap).append('<br /><span class="imgCaption" style="padding:' + style + '">' + captionText + '</span>');
      
    // I was trying different things here...
    //$(".imgCaption").css("background-color", $("img").css("background-color") );
    //$(".imgCaption").css("border", $("img").css("border") );
    Thanks

  4. #4
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You need to understand that border, padding and margin are just CSS shorthand and do not translate in JavaScript and jQuery. If you want for instance to copy the padding from he image to the caption you would write:
    $(".imgCaption").css({'padding-top':$('img').css('paddingTop'), 'padding-right':$('img').css('paddingRight'), ...});
    You will therefore need to add each a padding property for each side.
    The same goes for the margins and the borders.

    You could go faster if you just want to transfer the style attribute of the img to he element with imgcaption class by:
    $('.imgCaption').attr('style', $('img').attr('style'));

    That will just copy the "style" attribute from the img element to the element with that class name

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