Question

这里的家伙是一个简单的日历，我想用javascript更改margin-left属性。我使用简单的JavaScript代码。这是一个完整的演示：http://buhehe.de/kalender-2018/

<script>
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var table = document.getElementsByClassName("calendar");
var newmargin = (x - 222)/2;
var mq = window.matchMedia('@media all and (max-width: 500px)');
if( mq.matches) {
table.style.marginLeft = "newmargin ";
}  
</script>

日历宽度为222像素。我的目标是将它们设置在移动中心。所以我尝试获得第一个移动屏幕宽度，然后我减去222px并除以2.这必须是保证金左边的值。但它确实没有改变

Answer 1

您必须对代码进行一些更改，例如

table.style.marginLeft = "newmargin";

到

table.style.marginLeft = newmargin +"px";

和

window.matchMedia('@media all and (max-width: 500px)')

到

window.matchMedia('all and (max-width: 500px)')

<强> Reference link

＆＃13;

var w = window,
  d = document,
  e = d.documentElement,
  g = d.getElementsByTagName('body')[0],
  x = w.innerWidth || e.clientWidth || g.clientWidth,
  y = w.innerHeight || e.clientHeight || g.clientHeight;
var table = d.getElementsByClassName("calendar")[0];
var newmargin = (x - 222) / 2;
console.log(newmargin+"px")
var mq = window.matchMedia('all and (max-width: 700px)');
if (mq.matches) {
  table.style.marginLeft = newmargin +"px";
}

＆＃13;

.calendar{width:222px;height:40px;background:red;}

＆＃13;

<div class="calendar"></div>

＆＃13;

我希望这会对你有所帮助

Answer 2

var table = document.getElementsByClassName("calendar");

为您提供DOM 集合，而不是单个DOM元素。

您可能意味着使用

来使用该集合的第一个元素

var table = document.getElementsByClassName("calendar")[0];

然后，去

table.style.marginLeft = newmargin + 'px';

最后但并非最不重要的是，您需要修改对window.matchMedia()的调用：

window.matchMedia('all and (max-width: 500px)')

Answer 3

您可能将newmargin设置为字符串而不是变量值，请尝试以下操作：

if( mq.matches) {
   table.style.marginLeft = newmargin + 'px';
}

Answer 4

根据您的评论，您可以 不需要javascript 来实现您的目标。您只需将 text-align: center 添加到包含的类元素 .traki 即可。

.traki {
    text-align: center;
}

如果您只想将日历元素居中，可以将月份类嵌套在包装器中并应用 text-align: center 。

例如

<强> HTML

    <div id="wrapper">
        <div class="Februar">...</div>
        <div class="Maerz">...</div>
        ...
        <div class="Dezember">...</div>
    </div>

<强> CSS

    #wrapper {
        text-align: center;
    }

尝试使用javascript和媒体查询更改保证金

4 个答案: