Question

这是我的HTML：

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

我如何得到：

标题 - 即完成7个步骤中的4个＆＃39;
宽度 - 即＆＃39; 57％＆＃39;

并将其打印在div中，例如：

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

Answer 1

文档对象模型（简称DOM）允许Javascript访问和操作呈现的HTML属性。 Quirksmode has a very helpful introduction说明如何实现这样的目标。

让我们处理你的例子

＆＃13;

// 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 );
}

＆＃13;

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

＆＃13;

Answer 2

这应该可以解决问题：

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

修改：

第一个答案中的选择器很糟糕。这是有效的。

$(".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/

Answer 3

1）document.querySelector（“。course_progress_steps”）。title

2）document.querySelector（“。course_progress_percentage”）。style.width

就像一个魅力。

Answer 4

尝试这种方式计算％：

中的宽度

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>

Answer 5

所以这种情况升级了。希望它清楚它是如何工作的。

＆＃13;

$('<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

＆＃13;

<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>

＆＃13;

你可能想知道/学习的东西

快速阅读jQuery Tag将真正向您展示一些基础知识

Answer 6

您需要找到这些项目，并相应地获取所需的属性并将其作为内容插入，这里有一个小的demo

将CSS属性打印到HTML

6 个答案: