我正在尝试将自己的所见即所得编辑器编程为一个夏季项目。我正在尝试实现控制(单间距,双倍间距等)的线高功能。我创建了一个下拉菜单,允许用户在间距类型之间进行选择。但是,我似乎无法获得正确的Javascript,因为无论选择哪种选项,所选文本根本不会改变行距。有人可以看看我的Javascript并告诉我我哪里出了问题吗?如果可以的话,您能给我正确的Java代码以便我参考吗?谢谢!
HTML(有效):
<select id="lineHeight" onchange="spacing(this)">
<option value="20px">20px</option>
<option value="80px">80px</option>
<option value="100px">100px</option>
<option value="200px">200px</option>
</select>
Javascript(不起作用)
function spacing(sel) {
var text = editor.document.getSelection();
text.style.lineHeight = sel.value;
}
如果我了解您要做什么,那么这可能对您有用:
function changeStyle( property, value ) {
if ( window.getSelection().rangeCount ) {
var range = window.getSelection().getRangeAt( 0 ),
contents = range.extractContents(),
span = document.createElement( 'span' );
span.style[ property ] = value;
span.appendChild( contents );
range.insertNode( span );
window.getSelection().removeAllRanges()
}
}
#editor {
width: 350px;
max-height: 100px;
padding: 20px;
overflow-y: auto;
background-color: #efefef;
border: 1px solid #ddd
}
<p>
<label for="lineHeight">Line Height: </label>
<select id="lineHeight" onchange="changeStyle('line-height', this.value)">
<option value="20px">20px</option>
<option value="80px">80px</option>
<option value="100px">100px</option>
<option value="200px">200px</option>
</select>
<button onclick="changeStyle('font-weight', 'bold')">Bold</button>
<button onclick="changeStyle('font-style', 'italic')">Italic</button>
<button onclick="changeStyle('color', 'red')">Color</button>
<button onclick="changeStyle('background-color', 'yellow')">Background</button>
</p>
<div id="editor" contenteditable>Change the line height of the selected text with Javascript:<br>Please note that this example should be completed.</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句