小编sky*_*000的帖子

我正在寻找一种样式列表的方法,以便他们在contentEditable元素中编辑时使用用户设置的格式.具体来说,我希望能够以与其他<li>内容相同的方式设置数字/项目符号的样式.

从我完成的测试开始,浏览器永远不会<li>直接设置标签样式 (实际上控制数字/项目符号的样式),但总是将<font>标记(或<span>if StyleWithCSS)作为第一个子节点放置,使用它进行格式化.我已经尝试了一些想法来解决这个问题,但还没有找到成功:

1.以<li>编程方式应用样式

在这里,我试图倾听"DOMNodeInserted"和当<li>标签被插入到DOM,我质疑目前fontName,fontSize和foreColor命令和应用作为他们的内联样式<li>.

textarea.addEventListener('DOMNodeInserted', function (evt) {
    if (evt.target.nodeName === 'LI') {
        evt.target.style.color = queryCommandValue('foreColor');
        evt.target.style.fontFamily = queryCommandValue('fontName');
        evt.target.style.fontSize = queryCommandValue('fontSize');
    }
}, false);

即使这样做,只要您开始在列表项中键入内容,浏览器就会尝试"智能"并从中删除样式<li>,将它们放入<font>(或<span>)标记中.:(

2.为要插入StyleSheet的样式创建规则

基于上面的尝试,我没有为内联编写样式,而是为它们创建了一个规则,为<li>节点提供了一个ID,并将规则插入到样式表中.现在规则将决定它的风格<li>,我可以使用CSSOM不断更新任何特定<li>的样式.

这似乎工作得很好(有一些bug需要解决),但是,它完全打破了contentEditable撤销堆栈.由于撤消命令仅textContent与其他格式化命令相关联,因此无法"撤消"您在样式表中设置的样式.(至少不是很直观,我已经考虑过如何做到这一点......)

3.注意<li>属性的变化并保留它们

对于这次尝试,我使用了DOM级别4中新提供的MutationObserver http://www.w3.org/TR/dom/#mutationobserver.这个观察者可以监视节点属性的变化,这些变化将被传递回到MutationRecord.它甚至可以保存以前的属性值,包括style值,因此我可以找出正在删除的内容并重新应用它.

var observer = new WebKitMutationObserver(function(mutations) { …

我对JavaScript和OOP非常熟悉,但我对设计用于编程UI(HTML)的JS类非常不熟悉.我搜索了一下,但没有遇到任何流行的模式.

假设我想动态创建类似于面板的对象(类似于Microsoft Windows面板).每个对象都需要一个容器,一个可以包含文本标签的标题区域,以及一个具有单击事件处理程序的关闭按钮.除了DOM表示(HTML)之外,该对象还具有JavaScript对象表示(变量和方法).这是我尝试过的一种方式:

//
// Window class
//
var Window = function(params) {
    this.testMethod = function() {
        console.log('test');  // just an example
    }

    this.windowDiv = document.createElement('div');
    this.windowDiv.style.width = params.width + 'px';
    this.windowDiv.style.height = params.height + 'px';
    this.windowDiv.style.position = 'absolute';
    this.windowDiv.style.top = '30px';
    this.windowDiv.style.left = '30px';
    this.windowDiv.style.border = '1px solid #000';

    this.headerDiv = document.createElement('div');
    this.headerDiv.style.width = '100%';
    this.headerDiv.style.height = '30px';
    this.headerDiv.style.background = '#bbb';
    this.headerDiv.style.borderBottom = '1px solid #000';
    this.headerDiv.innerHTML = params.title;

    this.buttonDiv = document.createElement('div');
    this.buttonDiv.style.width = '30px';
    this.buttonDiv.style.height = '18px';
    this.buttonDiv.style.position …

我正在尝试在悬停在图像上时放大图像,并在将鼠标悬停在该图像上时显示带有文本的div.扩大的作品,但显示其他div没有.

<div id="punt1">
    <div id="puntnaam1" class="puntnaam">Ieplaan</div>
    <img class="punt"src="ieplaan1.jpg">
</div>

对于我使用的CSS:

.punt{
    height: 100px;
    width: 100px;
}

.puntnaam{
    display: none;
}

.punt:hover{
    transform: scale(3);
}

.punt:hover .puntnaam{
    display: block;
}

我究竟做错了什么？