小编the*_*ird的帖子

我的网站样式表中有很多CSS样式,它们使用以下内容或变体:

background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.0, #585858),
    color-stop(1.0, #ACACAC)
);
background: -moz-linear-gradient(
    center bottom,
    #585858 0%,
    #ACACAC 100%
);

我的问题是,当使用W3C Validator验证CSS时,我收到以下错误:

值错误:背景-webkit-gradient(线性,左下,左上,颜色停止(0.0,#585858),颜色停止(1.0,#acacac))不是背景值:-webkit-gradient(linear,左下,左上,颜色停止(0.0,#585858),颜色停止(1.0,#acacac)) - 网络渐变(线性,左下,左上,颜色停止(0.0,#585858),颜色-stop(1.0,#ACACAC))

据我所知,CSS很好......这是验证器的一个问题我应该让我认识的测试团队知道吗？

我在CSS中使用nth-child时遇到了问题(到目前为止在Chrome和Firefox中使用过).使用vanilla DOM操作方法(document.createElement,document.appendChild等)在客户端动态生成DOM的一部分.

我正在使用的CSS和生成的DOM如下:

CSS:

#loginForm label {
    color: #FF0000
}

#loginForm label:nth-child(1) {
    color: #8a8a8a;
}

DOM:

<div id="loginForm">
    <form>
        <label>Label 1</label>
        <label>Label 2</label>
    </form>
</div>

我已经尝试将这个HTML和CSS放到一个JSFiddle中,一切正常,所以我只能想象它与我的DOM操作有关.

我在MDN页面上注意到nth-child Opera无法处理元素的动态插入,但是没有提及其他浏览器.我是否正确地假设没有浏览器可以处理动态插入和nth-child？如果是这样,有解决方法吗？

编辑:

DOM插入代码(最后一行使用传递给包含代码的函数的目标变量).显然,它有更多的代码,但这是关键部分:

var contentHolder = document.createElement("div");
var form = document.createElement("form");
var userLabel = document.createElement("label");

form.appendChild(userLabel);
contentHolder.appendChild(form);
document.getElementById(target).appendChild(contentHolder);

我已经构建了一个Javascript轮播,当用户单击左箭头或右箭头时,它会在持有者DIV内滚动UL,并将溢出设置为隐藏.

HTML如下:

            <div id="promo-carousel-holder">
                <ul>
                    <li class="promo-item">
                        <img src="_includes/images/promo-tyre-image.jpg" alt="" />
                        <h4><strong>30% off</strong> Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. <a href="#" class="promo-link">View Offer</a></p>
                    </li>
                    <li class="promo-item">
                        <img src="_includes/images/promo-tyres-image.jpg" alt="" />
                        <h4><strong>30% off</strong> Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. <a href="#" class="promo-link">View Offer</a></p>
                    </li>
                    <li class="promo-item">
                        <img src="_includes/images/promo-tyre-image.jpg" alt="" />
                        <h4><strong>30% off</strong> Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque …

我目前有一个Javascript函数,它使用字符串来引用对象名称并访问其属性.我目前正在使用eval()来获得所需的效果,我知道这是非常非常错误的.这是我目前如何实现我想要的一个例子:

var stringToObjectRef = function() {

    var myTestVar = "myTestObject";
    var myTestObject = { 'item1' : 100, 'item2' : 12, 'item4' : 18 };

    var myValue = eval(myTestVar + '.item1');

    alert(myValue);

}();

我尝试过使用像[myTestVar] .item1这样的东西,但这会返回undefined.实现此目的的正确语法是什么？

提前致谢.

我对面向对象的东西相当新,所以这可能是完成这项工作的错误方法.

这是我目前拥有的非常精简的版本,但概念基本相同.当用户点击我页面上的画布元素时,我在下面创建20个粒子对象实例,将它们附加到数组,同时在30FPS更新画布并根据每个实例的x属性绘制圆形宾语.一旦粒子离开屏幕,它就会从阵列中移除.

var particle = function()
{
    var _this = this;
    this.velocity = 1;
    this.x = 0; 

    this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    var updateObject = function()
    {
        _this.x += velocity;
    }

}

我希望用户能够控制使用页面上的输入元素创建的新粒子的速度.当这更新时,我有一个事件监听器调用

particle.updateVelocity(whateverTheUserEntered);

但是我得到错误"粒子没有方法updateVelocity".在对该主题进行了一些阅读后,我明白要调用该函数我需要创建一个对象实例,但这只会更新该实例的速度值,这对我来说不起作用.

我的问题是,有没有办法实现我正在做的事情,或者我是以完全错误的方式接近这个？正如我所说,我仍然在掌握OOP原则,所以我可能刚刚回答了我自己的问题......