小编Möh*_*hre的帖子

如何将CSS计数器重置为给定列表的start-attribute

我正在使用一个自编的编号列表.如何读取start属性并使用CSS将其添加到计数器?

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>
Run Code Online (Sandbox Code Playgroud)

CSS

ol {
    list-style-type: none;

    /* this does not work like I expected */
    counter-reset: lis attr(start, number, 0);

}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}
Run Code Online (Sandbox Code Playgroud)

小提琴

css html-lists css-counter

13
推荐指数
5
解决办法
1万
查看次数

是否可以重载本机HTMLInputElement值getter?

我想知道是否有可能修改一个HTMLInputElement显示不同于值prop的东西.

为什么?好吧,有时您想要向用户显示类似字符串的内容,但您想要将ID发布到服务器.如果您在输入上使用多个逻辑/插件,那么使用额外的伪造插件就会出现问题.那么为什么不把两者都包括在一起?!=)

我已经注意到可以为value道具定义一个吸气剂.但是我放弃了原生的setter功能,它将改变显示的文本.= /

HTML:

<input id="foobar" type="text"/>
Run Code Online (Sandbox Code Playgroud)

JS:

var input = document.getElementById('foobar');
    input.value = 'Mr. Foo Bar';
    input.myHiddenValue = 123;

Object.defineProperty(input, 'value', {
    get: function(){
        return this.myHiddenValue; 
    }
});
Run Code Online (Sandbox Code Playgroud)

所以,如果你能告诉我,如果这是可能的,并保持本地制定者或只是一个愚蠢的深夜想法,让我知道xD

javascript html5

6
推荐指数
1
解决办法
542
查看次数

在固定容器内使用 CSS 最大高度过渡的 Chrome 滚动错误

我有一个固定的导航侧边栏,并希望在子级别上为上滑/下滑动画使用过渡。出于某种未知原因,Chrome 在制作动画时会滚动页面。因为这仅在 Chrome 中发生,所以它可能是一个错误。有人知道出了什么问题吗?

html,body {
    margin: 0;
    padding: 0;
    color: white;
}

#content {
    position: relative;
    height: 4000px;
    overflow: auto;
    background: grey;
}

#fixed {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 200px;
    background: red;
    overflow-x: hidden
    overflow-y: auto;
}

#test {
    max-height: 0;
    background: blue;
    transition: max-height 0.5s, padding-bottom 0.5s;
    overflow: hidden;
}
#test:target {
    max-height: 50vh;
}

#testContent {
    height: 200px;
    background: green;
}
Run Code Online (Sandbox Code Playgroud)
<div id="content">
    <div id="fixed">
        <a href="#test">Open Test</a><br/>
        <a href="#">Close Test</a><br/>
        <div …
Run Code Online (Sandbox Code Playgroud)

css scroll transition google-chrome

5
推荐指数
1
解决办法
980
查看次数