CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brett
Brett

Reputation: 419

Print CSS properties to HTML

This is my HTML:

<dd class="course_progress_steps" title="4 out of 7 steps completed">
   <div class="course_progress_percentage" style="width: 57%;"></div>
</dd>

How do I get:

  1. the title - i.e. '4 out of 7 steps completed'
  2. the width - i.e '57%'

and print them out in a div, for example:

<div class="css-info steps">4 out of 7 steps completed</div>
<div class="css-info percentage">57%</div>

Upvotes: 1

Views: 1135

Answers (6)

Ragnar
Ragnar

Reputation: 4578

Try this way calculating the width in %: 

var width = Math.round($(".course_progress_percentage").width() / $(".course_progress_percentage").parent().width() * 100);

        $(".css-info.percentage").append(width  + "%");
        $(".css-info.steps").append($(".course_progress_steps").attr("title"));

      }); 


$(function(){

  $('#button').click(function(){
    
    var width = Math.round($(".course_progress_percentage").width() / $(".course_progress_percentage").parent().width() * 100);
    
    $(".css-info.percentage").append(width  + "%");
    $(".css-info.steps").append($(".course_progress_steps").attr("title"));

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="course_progress_steps" title="4 out of 7 steps completed">
   <div class="course_progress_percentage" style="width: 57%;"></div>
</div>
<input type="button" id="button" value="OK"/>

<div class="css-info steps"></div>
<div class="css-info percentage"></div>

Upvotes: 0

Spokey
Spokey

Reputation: 10994

So this kinda escalated. Hope it's clear how it works. 

$('<div/>', {                    // create a div element 
  text: $('dd')[0].title,        // change the inner text
  class: "css-info steps"        // add a the class to the element
}).add($('<div/>', {             // create another element and add it together with the previous one
  text: $.trim($('.course_progress_percentage').attr('style') // get the text inside style, $.trim() removes white spaces from the beginning and end of the string
               .split(':')[1]    // creates an array and uses : as the splitting point ["width", "57%;"] and selects the 2nd array value
               .replace(';', '')), // remove the ;
  class: "css-info percentage"
})).appendTo('body');            // since both elements are now added together we can append them both to ex. body
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<dd class="course_progress_steps" title="4 out of 7 steps completed">
  <div class="course_progress_percentage" style="width: 57%;">
  </div>
</dd>

Stuff you might want to know/learn

Also a quick read of the jQuery Tag will really show you some of the basics

Upvotes: 0

Art Hitrick
Art Hitrick

Reputation: 145

You need to find these items and, accordingly, to obtain the required attributes and insert them as the contents, here is a small demo

Upvotes: 0

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

This should do the trick : 

$(".css-info steps").text($(".course_progress_steps").attr("title"));
$(".css-info percentage").text($(".course_progress_steps").css("width") + "%");

Edit :

the selector was bad in the first answer. this is working.

$(".css-info.steps").text($(".course_progress_steps").attr("title"));
$(".css-info.percentage").text($(".course_progress_percentage").attr("style").trim().split("width:")[1].split(";")[0]);

http://jsfiddle.net/t0b8dqe2/1/

Upvotes: 0

Barney
Barney

Reputation: 16456

The Document Object Model (DOM for short) allows Javascript to access and manipulate rendered HTML's attributes. Quirksmode has a very helpful introduction that goes over how to achieve things like this.

Let's deal with your example 

// document.querySelector allows us to get references to DOM elements using CSS selectors
// The '$' at the beginning of the variable names is a little convention to remind us it's a reference to a DOM element
var $course_progress_steps      = document.querySelector( '.course_progress_steps' );
var $course_progress_percentage = document.querySelector( '.course_progress_percentage' );

// getAttribute can get an attribute value from a DOM element
var steps      = $course_progress_steps.getAttribute( 'title' );
// style returns a CSSStyleDeclaration, which is a way of interfacing with element style
var percentage = $course_progress_percentage.style.getPropertyValue( 'width' );

appendCssInfo( 'steps',      steps );
appendCssInfo( 'percentage', percentage );

// A helpful function for creating elements with a class of 'key' and text of 'value'
function appendCssInfo( key, value ){
  // Create an element
  var $css_info = document.createElement( 'div' );
  
  // Add the classes we want
  $css_info.classList.add( 'css_info' );
  $css_info.classList.add( key );
  
  // Insert the text using appendChild & createTextNode
  $css_info.appendChild( document.createTextNode( value ) );
  
  // Append the new element to the document body
  document.body.appendChild( $css_info );
}
<dd class="course_progress_steps" title="4 out of 7 steps completed">
   <div class="course_progress_percentage" style="width: 57%;"> 
   </div>
</dd>

Upvotes: 1

Keyang
Keyang

Reputation: 1878

1) document.querySelector(".course_progress_steps").title

2) document.querySelector(".course_progress_percentage").style.width

works like a charm.

Upvotes: 0

Related Questions