নিয়মটি নিম্নরূপ বলা যাক:
.largeField {
width: 65%;
}
কোনওভাবে '65% 'ফিরে পাওয়ার কোনও উপায় আছে, এবং পিক্সেলের মানটি নয়?
ধন্যবাদ
সম্পাদনা করুন: দুর্ভাগ্যবশত করে DOM পদ্ধতি ব্যবহার করে আমার ক্ষেত্রে অবিশ্বস্ত হিসাবে আমি একটি স্টাইলশীট যা আমদানির অন্যান্য স্টাইলশীট আছে, এবং এর ফলে cssRules পারেন সঙ্গে শেষ পর্যন্ত প্যারামিটার নাল বা অনির্ধারিত মান।
এই পদ্ধতির ক্ষেত্রে, বেশিরভাগ সোজা ক্ষেত্রে (একটি স্টাইলশিট, নথির প্রধান ট্যাগের অভ্যন্তরে একাধিক পৃথক স্টাইলশিট ঘোষণা ) কাজ করবে।
উত্তর:
কোনও অন্তর্নির্মিত উপায় নেই, আমি ভয় করি। আপনি এর মতো কিছু করতে পারেন:
var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';
class="largeField"স্প্যানটি যোগ করতে হবে, বর্তমানে আপনি একটি খালি সেট নির্বাচন করছেন।
সর্বাধিক সহজ উপায়
$('.largeField')[0].style.width
// >>> "65%"
style="width:65%")।
এটি খুব সম্ভবত সম্ভব!
আপনাকে অবশ্যই প্রথমে প্যারেন্ট উপাদানটি লুকিয়ে রাখতে হবে। এটি জাভাস্ক্রিপ্টটিকে শিশু উপাদানটির জন্য পিক্সেল গণনা করা থেকে বিরত রাখবে।
$('.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>
styleSheets[0]) ব্যবহার করেছে ।
for (var i=0; rules.length; i++)কাজ করবে? এটি হওয়া উচিত নয়for (var i=0; i<rules.length; i++)
অ্যাডামসের উত্তরের উপর ভিত্তি করে একটি jQuery প্লাগইন:
(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% 'ফেরত আসবে। যদি আপনি (প্রস্থ == '65%') পছন্দ করেন তবে কেবল আরও ভাল কাজ করার জন্য গোলাকার সংখ্যাগুলি দেয় returns আপনি যদি অ্যাডামসের উত্তরটি সরাসরি ব্যবহার করতে পারতেন তবে তা কার্যকর হয়নি (আমি 64.93288590604027 এর মতো কিছু পেয়েছি)। :)
টিমোফিয়ার দুর্দান্ত এবং অবাক করা সমাধানের ভিত্তিতে বিল্ডিং, এখানে একটি খাঁটি জাভাস্ক্রিপ্ট বাস্তবায়ন রয়েছে:
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 এ গ্লোবাল স্টাইলশীটের মান অর্জনে আমার একই রকম সমস্যা রয়েছে , শেষ পর্যন্ত আমি উপরের মত একই সমাধান নিয়ে এসেছি ।
কেবল দুটি প্রশ্নের ক্রসলিংক করতে চেয়েছিলেন যাতে অন্যরা পরবর্তী ফলাফলগুলি থেকে উপকৃত হয়।
পিক্সেল থেকে শতাংশে রূপান্তর করুন ক্রস গুণকে ব্যবহার করে ।
সূত্র সেটআপ:
১) (এলিমেন্ট_উইথ_পিক্সেল / প্যারেন্ট_উইথ_পিক্সেল) = (এলিমেন্ট_উইথ_পারসেন্টেজ / 100)
২) উপাদান_দ্বীপ_পরিবেদী = (100 * উপাদান_ প্রস্থ_পিক্সেল) / পিতামাতা_পরিচয়_পিক্সেল
আসল কোড:
<script>
var $width_percentage = (100 * $("#child").width()) / $("#parent").width();
</script>
আপনি jQuery এর সাথে অ্যাক্সেস করার জন্য প্রয়োজনীয় স্টাইলগুলি এতে অন্তর্ভুক্ত করতে পারেন:
তারপরে ডকুমেন্টের শিরোনামে স্টাইল ট্যাগের মধ্যে থাকা সমস্ত কিছু পার্স করার জন্য একটি জেএস ফাংশন লিখতে এবং আপনার প্রয়োজনীয় মানটি ফিরিয়ে আনা সম্ভব হবে (যদিও প্রয়োজনীয়ভাবে সহজ নয়)।
JQuery তে কিছুই নেই, এমনকি জাভাস্ক্রিপ্টে সোজা কিছুই নেই। টিমোফয়ের উত্তর নিয়ে এবং এটির সাথে চলতে, আমি এই ফাংশনটি তৈরি করেছি যা আপনার পছন্দসই কোনও সম্পত্তি পেতে কাজ করে:
// 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 (প্রস্থ) ফাংশনটি ব্যবহার করতে পারেন।
অর্থাত্
var myWidth = $("#myElement").css("width");
আরও দেখুন: http://api.jquery.com/width/ http://api.jquery.com/css/