小编Bej*_*N.J的帖子

Svelte: <svelte:window bind:innerHeight /> 无法在窗口调整大小时使用 div 中的样式属性

在调整窗口大小时,我尝试使用 svelte 特殊元素在 div 元素中添加动态高度作为样式属性,<svelte:window bind:innerHeight />但我没有得到我正在寻找的正确结果,有什么我错过的吗?

代码:-

<script>
    var innerHeight;
</script>

<svelte:window bind:innerHeight={innerHeight} />

<div style="height: {innerHeight};">
    <h1>window height : {innerHeight}</h1>
</div>
Run Code Online (Sandbox Code Playgroud)

输出:-

在此输入图像描述

提前致谢

javascript height resize window svelte

4
推荐指数
1
解决办法
3546
查看次数

Svelte:当按向上键和向下键时,如何将焦点设置到列表项中的上一个/下一个元素?

在 svelte 中按向上箭头/向下箭头键时,如何将焦点设置到列表项中的上一个/下一个元素?

我想在按下向下箭头键时将焦点更改为下一个列表项,并在按键盘上向上箭头键时将焦点更改为上一个列表项,我已经开始处理一些代码,但它仍然无法正常工作,所以它会如果有人可以帮助我,那就太好了,提前致谢

代码:-

<script>
    let keyCode;
    let item;
    
    function handleKeydown() {
        item =  document.getElementsByClassName('item');
        let itemLength = item.length;
        keyCode = event.keyCode;
        
        switch(keyCode){
            //ArrowUp
            case 38:
                //when clicking up arrow focus should move upwards li elements
            break;
            //ArrowDown
            case 40:
                //when clicking down arrow focus should move downwards li elements
            break;
        }   
    }
</script>

<style>
    .item:focus{
        border: 1px solid #000000;
    }
</style>

<svelte:window on:keydown={handleKeydown} />

<ul>
    <li class="item" tabindex="0" >
        <p>List Item 1</p>
    </li> …
Run Code Online (Sandbox Code Playgroud)

javascript focus keypress listitem svelte

2
推荐指数
1
解决办法
3053
查看次数

标签 统计

javascript ×2

svelte ×2

focus ×1

height ×1

keypress ×1

listitem ×1

resize ×1

window ×1