英文:
Is there a way to convert a string into an int in css?
问题
在HTML中，每个"loading..."的点都有一个在HTML中的"data-dotnum"属性。我想要将每个点的位置定位到加载中，以便在开始时它看起来正常，但仍然可以操纵单个点。我正在使用"calc()"来确定它在开始时应该去哪里（稍后我会找出正确的间距）。我不认为JavaScript可以获取属性，但也许可以，如果JavaScript可以从HTML获取数据属性，请告诉我（以及如何操作）。
HTML代码如下：
<div class="loadingText">
<h1 class="mainline">Loading</h1>
<h1 class="dot" data-dotnum="1">.</h1>
<h1 class="dot" data-dotnum="2">.</h1>
<h1 class="dot" data-dotnum="3">.</h1>
</div>
正如您所看到的，每个点都具有相同的类别，因此我无法通过类别选择它们。如果必须的话，我可以将每个点更改为具有不同的类别，但是对于我所考虑的简单加载动画，我认为只使用其数字来计算其位置会更容易。
CSS代码如下：
h1 {
position: absolute;
margin-bottom: 0;
}
.dot {
left: calc(122px + calc(attr(data-dotnum) * 30px));
}
这就是问题所在。使用"attr(data-dotnum)"返回一个字符串，而"calc()"无法将字符串乘以30。我想知道是否有一种属性可以将字符串更改为整数。
英文:
So, I'm making a loading screen where each dot of the "loading..." has a data-dotnum in the html. I want to position each dot on the loading so I can have it look normal at the beginning but still be able to manipulate individual dots. I'm using calc() to get where it should go at the beginning (I'll figure out the correct spacing later.) I don't think that javascript can get attributes, but maybe it can, so please say that (and how to do it) if javascript can get data attributes from html.
The HTML is:
<div class="loadingText">
<h1 class="mainline">Loading</h1>
<h1 class="dot" data-dotnum="1">.</h1>
<h1 class="dot" data-dotnum="2">.</h1>
<h1 class="dot" data-dotnum="3">.</h1>
</div>
As you can see, each dot has the same class, so I cannot select them by class. If I have to I could change each to have a different class, but for the simple loading animation I am thinking of, I think just calculating its position using what its number is would be easier.
The CSS is:
h1 {
position: absolute;
margin-bottom: 0;
}
.dot {
left: calc(122px + calc(attr(data-dotnum) * 30px));
}
And that's where the problem comes in. using "attr(data-dotnum)" returns a string, and calc() can't multiply a string by 30. I want to know if there is a property that can change the string to be an int.
答案1
得分: 1
你可以使用CSS变量。
h1 {
position: absolute;
margin-bottom: 0;
}
.dot {
left: calc(122px + calc(var(--data-dotnum) * 30px));
}
<div class="loadingText">
<h1 class="mainline">Loading</h1>
<h1 class="dot" style="--data-dotnum:1;">.</h1>
<h1 class="dot" style="--data-dotnum:2;">.</h1>
<h1 class="dot" style="--data-dotnum:3;">.</h1>
</div>
英文:
You can use css variables.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
h1 {
position: absolute;
margin-bottom: 0;
}
.dot {
left: calc(122px + calc(var(--data-dotnum) * 30px));
}
<!-- language: lang-html -->
<div class="loadingText">
<h1 class="mainline">Loading</h1>
<h1 class="dot" style="--data-dotnum:1;">.</h1>
<h1 class="dot" style="--data-dotnum:2;">.</h1>
<h1 class="dot" style="--data-dotnum:3;">.</h1>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论