英文:
:: jQuery :: Split CSS value of inset and assign values to top, right, bottom and left
问题
Sure, here's the translated CSS code:
top: 8.01562%,
right: auto,
bottom: 3%,
left: 7.8047%
Please note that this is the CSS code extracted from your provided content.
英文:
I am getting CSS inset (absolute position) value to div dynamically like below.
inset: 8.01562% auto 3% 7.8047%
From above, I want to assign as CSS:
- first value (
8.01562%) totop - second value to
right - third value to
bottom - fourth value to
left
Like below:
top: 8.01562%,
right: auto,
bottom: 3%,
left: 7.8047%
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var __top = jQuery('.wrapper').css('inset')[0]
var __right = jQuery('.wrapper').css('inset')[1]
var __bottom = jQuery('.wrapper').css('inset')[2]
var __left = jQuery('.wrapper').css('inset')[3]
jQuery('.wrapper').css('inset', '')
jQuery('.wrapper').css('top', __top);
jQuery('.wrapper').css('right', __right);
jQuery('.wrapper').css('bottom', __bottom);
jQuery('.wrapper').css('left', __left);
<!-- language: lang-css -->
.wrapper{position:absolute;}
<!-- language: lang-html -->
<div class="wrapper" style="inset: 8.01562% auto 3% 7.8047%">My content</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- end snippet -->
答案1
得分: 1
The "inset" property is a shorthand property. To get the values set in your element with "inset," you have to use the underlying four properties:
var __top = jQuery('.wrapper').css('top');
var __right = jQuery('.wrapper').css('right');
var __bottom = jQuery('.wrapper').css('bottom');
var __left = jQuery('.wrapper').css('left');
You can get all of the properties at once if you like:
var props = jQuery('.wrapper').css(["top", "right", "bottom", "left"])
var __top = props.top;
var __right = props.right;
var __bottom = props.bottom;
var __left = props.left;
As per the jQuery documentation for .css(), retrieval of shorthand properties is not guaranteed. The underlying component properties should be retrieved, as in this answer.
英文:
The "inset" property is a shorthand property. To get the values set in your element with "inset", you have to use the underlying four properties:
var __top = jQuery('.wrapper').css('top');
var __right = jQuery('.wrapper').css('right');
var __bottom = jQuery('.wrapper').css('bottom');
var __left = jQuery('.wrapper').css('left');
You can get all of the properties at once if you like:
var props = jQuery('.wrapper').css(["top", "right", "bottom", "left"])
var __top = props.top;
var __right = props.right;
var __bottom = props.bottom;
var __left = props.left;
As per the jQuery documentation for .css(), retrieval of shorthand properties is not guaranteed. The underlying component properties should be retrieved, as in this answer.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论