如何简化Javascript对象以便设置obj.BG='红色'而不是obj.css(“style”:“v

How do I simplify a Javascript object so I can set obj.BG='red' rather than obj.css("style": "value")

本文关键字：obj css 何简化 style BG 设置 对象 红色 Javascript      更新时间：2023-09-26

我创建了一个div对象，作为另一个div物体的拖动手柄。我想添加一些自定义属性并初始化它。我已经这样做了（正如你所看到的，我正在使用一些jQuery）：

          $(document).ready(function(){
    ...
        // initialise object properties & variables
              var SDStartValDragger = {
                beginDragPos: 0,
                currentPos: 0,
                mouseIsDown: false,
                [bg]:css("background-color": "black")
              }
          // make the drag handle change to red while the mouse is over it
                $(".HDragHandle").mouseover(function() {
                  $(this).css({"background-color": "red"});
                });
          // make the drag handle change to black while the mouse leaves it
                $(".HDragHandle").mouseleave(function() {
                  $(this).css("background-color": "black");
                });
//I'm trying to convert to OO coding style, so I can do the previous with 
//              $(".HDragHandle").mouseover(function() {
//                $(this).bg="red"; 
// or similar.
          }

我不明白如何初始化SDStartValDragger对象的css对象（？）的background-color值？在我的代码主体（post-init）中，我还希望能够通过SDStartValDragger.bg = "red" 为SDStartValDragger设置background-color

html正文部分看起来是这样的，如果有帮助的话？

  <body>
    <div id='SDviz'></div>
    <div id='SDscope'>
      <div id='SDvalueSetter'>
        <div id='SDStartValDragger' class='HDragHandle'></div>
        <div id='SDEndValDragger' class='HDragHandle'></div>
      </div>
    </div>
    <div id='SDvalueContainer'>
      <div id='SDStartVal'>29-02-2013<br/>09:30:01</div>
      <div id='SDEndVal'>13-12-2015<br/>14:30:00</div>
    </div>
    <div>
      <div id='startVal'>0</div>
      <div id='endVal'>0</div>     
    </div>
    <div>
      <div id='currentStartVal'>0</div>
      <div id='currentEndVal'>0</div>     
    </div> </body>
</html>

听起来您希望bg是一个访问器属性。从应该在哪里或如何设置background-color的问题来看，这一点还不清楚，但以下是访问器部分的操作方法：

var SDStartValDragger = {
    // ...your other properties...
    set bg(value) {
      // Use value to set background-color
    },
    get bg() {
      // Return the current background-color
    }
};

这要求浏览器中的JavaScript引擎至少支持ES5（2009），因此例如，在此之前推出的IE8就无法运行。

以下是一个对象的示例，该对象封装DOM元素并在DOM元素上设置background-color（通过jQuery），以响应如上所述的bg属性：

var SDStartValDragger = {
  element: $("#target"),
  set bg(value) {
    this.element.css("background-color", value);
  },
  get bg() {
    return this.element.css("background-color");
  }
};
setTimeout(function() {
  SDStartValDragger.bg = "red";
}, 400);
setTimeout(function() {
  SDStartValDragger.bg = "green";
}, 800);
<div id="target">This is the target element</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

相关文章：