Javascript 更改object.style.alignSelf的值

假设我有一个函数，可以通过JS更改Align Self css属性

HTML JS Javascript似乎不会立即更改align self属性。当我点击时，它不会改变。我跳进devTools去看看哪里出了问题，当屏幕发生变化时，它就被应用了（？）。我没有媒体的疑问。我在3种不同的浏览器上试过，但AlignSelf似乎没有立即显示在屏幕上。它实际上只在我跳入devtools或类似更改屏幕大小时才改变。有人知道为什么吗

---

**没关系，似乎只有铬对它没有反应。仍然不明白此代码的哪一部分与Chrome不兼容，那么当您更改屏幕大小时，是否确定应用了alignSelf属性？ 还是只是默认的巴哈维奥？在开发工具中，如果检查，是否在图像元素处看到样式属性如果是，则您的箭头选择器可能会覆盖它。如果是这样，我会尝试在一个类之间切换，在这个类中可以使用！重要信息规则以覆盖属性。像这样：

.flex-start{
align-self: flex-start !important; 
}

---

“变换旋转”与

alignSelf

有什么关系？没有什么。也只有上面的。。。很难说。创建一个提到的变换旋转，因为它是按应该的方式工作的，但不是出于某种奇怪的原因。我以为我只是在某个地方写错了什么，但只有alignSelf似乎在屏幕状态发生变化后才发生变化。当我检查它时，我可以在它添加的样式属性中看到它。但事情是这样的！当我按下并且它不起作用时，我跳入DevTools，然后突然应用了样式（因此我提到了当屏幕状态发生变化时的原因，如果有意义的话）。直到我真正跳到DevTools上，它才起作用。另一件有趣的事是，当我再次按下它使它返回时，它工作得非常好。我也尝试了你的解决方案。但似乎并没有真正解决这个问题。只有chrome有这个问题。Safari和Mozilla在应用代码时都没有任何问题，并且实际出现了。由于某种原因，Chrome不会移动。在这一点上看起来更像是一个兼容性问题，但我不知道这个Chrome的哪一部分被拒绝了，听起来真的很奇怪。Sry idk可能是什么

.container {
    background-color: $white;
    box-shadow: 2px 0px 4px 1px black;
    width: 400px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    visibility: visible;
    position: relative;
    z-index: 2;
}
#arrow {
    height: 25px;
    width: 25px;
    position: absolute;
    align-self: flex-end;
    top: 50vh;
    cursor: pointer;
    background-color: $white;
    border-radius: 50%;
}

function reverseIcon () {
    arrow.style.alignSelf = "flex-start";
}

arrow.addEventListener("click", reverseIcon);

.flex-start{
align-self: flex-start !important; 
}