如何使用原型获取背景图像的 x 或 y 位置？

发布于 2024-08-28 15:43:55 字数 206 浏览 10 评论 0原文

嘿，我正在使用 Prototype 制作一个简单的用户友好的 CSS 编辑器。不管怎样，我想知道我是否可以自己获取背景位置 x/y 值？

我希望我能做这样的事情，但遗憾的是它不起作用： element.getStyle('background-position-x);

我猜这是因为位置有不同的形式，比如“center”，而不仅仅是通用的。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

二货你真萌 2024-09-04 15:43:57

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
    background-image: url(00.jpg);
    background-repeat: no-repeat;
    background-position: top left;
}
-->
</style>
<script type="text/javascript">
function getStyle(obj,att){
for(var i=0;i<att.length;i++){
if(window.getComputedStyle){
obj[att[i]]=window.getComputedStyle(obj,null)[att[i]];
}
else if(obj.currentStyle){
obj[att[i]]=obj.currentStyle[att[i]];
}
}
}

onload=function(){
var obj = document.getElementsByTagName('body')[0];
var att=['backgroundImage','backgroundRepeat','backgroundPosition']
getStyle(obj,att)
for(var i=0;i<att.length;i++) {alert(obj[att[i]])}
}
</script>
</head>
<body>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
    background-image: url(00.jpg);
    background-repeat: no-repeat;
    background-position: top left;
}
-->
</style>
<script type="text/javascript">
function getStyle(obj,att){
for(var i=0;i<att.length;i++){
if(window.getComputedStyle){
obj[att[i]]=window.getComputedStyle(obj,null)[att[i]];
}
else if(obj.currentStyle){
obj[att[i]]=obj.currentStyle[att[i]];
}
}
}

onload=function(){
var obj = document.getElementsByTagName('body')[0];
var att=['backgroundImage','backgroundRepeat','backgroundPosition']
getStyle(obj,att)
for(var i=0;i<att.length;i++) {alert(obj[att[i]])}
}
</script>
</head>
<body>

</body>
</html>

回复收藏 0 原文

落在眉间の轻吻 2024-09-04 15:43:57

嘿，这看起来效果很好。即使位置设置为“中心中心”，原型也会将其转换为百分比！非常方便！

var temp = $('header').getStyle('background-position');
var split = temp.split(" ");
$('header_horizontal_position').value = split[0];
$('header_vertical_position').value = split[1];

不管怎样，谢谢大家的帮助。

Hey, this seemed to work pretty well. Even when the position is set to 'center center' prototype will translate this into percentages! Very handy!

var temp = $('header').getStyle('background-position');
var split = temp.split(" ");
$('header_horizontal_position').value = split[0];
$('header_vertical_position').value = split[1];

Anyway, thanks for the help guys.

回复收藏 0 原文

~没有更多了~