如何在Typescript中使用样式属性
[英]How to use style property in Typescript
问题描述
I want a slideshow in simple html and javascript. 
我想用简单的html和javascript进行幻灯片显示。 i have written my code below. 我在下面写了我的代码。 there is an error in using style property to hide and show image. 使用style属性隐藏和显示图像时出错。 I used this code in typescript (ionic). 我在打字稿（离子）中使用了此代码。 I have error in both lines having style property in code 'x[i].style.display'. 两行在代码“ x [i] .style.display”中具有样式属性的行都出错。 Please tell me how to use style 请告诉我如何使用样式
Html code is - HTML代码是-
<div class="w3-content w3-display-container">
<div class="w3-display-container mySlides">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
French Alps
</div>
</div>
<div class="w3-display-container mySlides">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
Northern Lights
</div>
</div>
</div>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">❯</button>
Typescript code- 打字稿代码-
constructor(public navCtrl: NavController)
{
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
console.log(x);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
}
2 个解决方案
解决方案1
0 2019-01-04 12:38:22
You calling your scripts before page loaded. 您在页面加载之前调用脚本。 Remove showDivs(slideIndex) call from script and call it in onload: 从脚本中删除showDivs（slideIndex）调用，并在onload中调用它：
<body onload="showDivs(1)">
解决方案2
0 2019-01-04 12:57:31
You can use HTMLDivElement in TypeScript. 您可以在TypeScript中使用HTMLDivElement。 For example; 例如;
var container: HTMLDivElement;
container.style.color = "red";
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.