สมมติว่ากฎมีดังนี้:

.largeField {
    width: 65%;
}

มีวิธีเอาคืน '65% 'บ้างไหมและไม่ใช่ค่าพิกเซล?

ขอบคุณ.

แก้ไข:แต่น่าเสียดายที่ใช้วิธีการ DOM จะไม่น่าเชื่อถือในกรณีของฉันที่ฉันมีสไตล์ชีตซึ่งการนำเข้าสไตล์ชีตอื่น ๆ และเป็นผลให้cssRulesพารามิเตอร์ปลายขึ้นกับทั้งnullหรือไม่ได้กำหนดค่า

อย่างไรก็ตามวิธีนี้จะใช้ได้ผลในกรณีที่ตรงไปตรงมาที่สุด (สไตล์ชีตเดียวการประกาศสไตล์ชีตแยกกันหลายรายการภายในแท็กหัวของเอกสาร)

ไม่มีทางในตัวฉันกลัว คุณสามารถทำสิ่งนี้:

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

วิธีที่ง่ายที่สุด

$('.largeField')[0].style.width

// >>> "65%"

เป็นไปได้แน่นอนที่สุด!

ก่อนอื่นคุณต้องซ่อน () องค์ประกอบหลัก วิธีนี้จะป้องกันไม่ให้ JavaScript คำนวณพิกเซลสำหรับองค์ประกอบลูก

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

เห็นของฉัน ตัวอย่างเช่น

ตอนนี้ ... ฉันสงสัยว่าฉันจะค้นพบแฮ็คนี้ก่อนไหม :)

อัปเดต:

หนึ่งในสายการบิน

element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');

มันจะทิ้งองค์ประกอบที่ซ่อนไว้ก่อนหน้าไฟล์ </body>.remove()แท็กซึ่งคุณอาจต้องการ

ดูไฟล์ ตัวอย่างซับเดียว

ฉันเปิดรับแนวคิดที่ดีกว่า!

คุณสามารถเข้าถึงdocument.styleSheetsวัตถุ:

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script type="text/javascript">
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

ช่วงปลาย แต่สำหรับผู้ใช้ใหม่ให้ลองทำเช่นนี้หากสไตล์ css มีเปอร์เซ็นต์ :

$element.prop('style')['width'];

ปลั๊กอิน jQuery ตามคำตอบของ Adams:

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
        return Math.round(100*width)+'%';
    };

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());​​​​​

จะคืนค่า '65% ' ส่งคืนเฉพาะตัวเลขที่ปัดเศษเท่านั้นเพื่อให้ทำงานได้ดีขึ้นหากคุณต้องการ (width == '65%') หากคุณจะใช้คำตอบของ Adams โดยตรงนั่นไม่ได้ผล (ฉันมีบางอย่างเช่น 64.93288590604027) :)

จากโซลูชันที่ยอดเยี่ยมและน่าประหลาดใจของ Timofey นี่คือการใช้งาน Javascript ที่แท้จริง:

function cssDimensions(element)
  var cn = element.cloneNode();
  var div = document.createElement('div');
  div.appendChild(cn);
  div.style.display = 'none';
  document.body.appendChild(div);
  var cs = window.getComputedStyle
    ? getComputedStyle(cn, null)
    : cn.currentStyle;
  var ret = { width: cs.width, height: cs.height };
  document.body.removeChild(div);
  return ret;
}

หวังว่าจะเป็นประโยชน์กับใครบางคน

ฉันมีปัญหาที่คล้ายกันในการรับค่าของสไตล์ชีทส่วนกลางใน jQueryในที่สุดฉันก็หาวิธีแก้ปัญหาเดียวกันกับด้านบนการแก้ปัญหาเดียวกับข้างต้น

แค่ต้องการเชื่อมโยงคำถามทั้งสองข้อเพื่อให้ผู้อื่นได้รับประโยชน์จากการค้นพบในภายหลัง

แปลงจากพิกเซลเป็นเปอร์เซ็นต์โดยใช้การคูณไขว้แปลงจากพิกเซลสัดส่วนการใช้บัญญัติไตรยางศ์

การตั้งค่าสูตร:

1. ) (element_width_pixels / parent_width_pixels) = (element_width_percentage / 100)

2. ) element_width_percentage = (100 * element_width_pixels) / parent_width_pixels

รหัสจริง:

<script>

   var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

</script>

คุณสามารถใส่สไตล์ที่คุณต้องการเข้าถึงด้วย jQuery ใน:

1. ส่วนหัวของเอกสารโดยตรง
2. ในการรวมซึ่งสคริปต์ฝั่งเซิร์ฟเวอร์จะใส่ไว้ในส่วนหัว

จากนั้นควรเป็นไปได้ (แม้ว่าจะไม่ใช่เรื่องง่าย) ในการเขียนฟังก์ชัน js เพื่อแยกวิเคราะห์ทุกอย่างภายในแท็กสไตล์ในส่วนหัวเอกสารและส่งคืนค่าที่คุณต้องการ

ไม่มีอะไรใน jQuery และไม่มีอะไรตรงไปตรงมาแม้แต่ในจาวาสคริปต์ จากคำตอบของ Timofey และดำเนินการกับมันฉันสร้างฟังก์ชันนี้ขึ้นมาเพื่อให้ได้คุณสมบัติที่คุณต้องการ:

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

คุณสามารถใช้ฟังก์ชัน css (width) เพื่อส่งกลับความกว้างปัจจุบันขององค์ประกอบ

กล่าวคือ.

var myWidth = $("#myElement").css("width");

ดูเพิ่มเติมที่: http://api.jquery.com/width/ http://api.jquery.com/css/