Использование координат мыши в качестве значений пикселей для функций JavaScript
Есть ли способ ввести координаты щелчка мышью как величину, на которую можно изменить свойство элемента, как в функции следующего типа? В частности, есть ли способ использовать координату Y щелчка мыши в качестве количества пикселей для высоты вместо фиксированного числа пикселей?
function changeObject() {
document.getElementById('object').style.height = '500px';
}
Редактировать:
Используйте куки, чтобы запомнить прежнюю высоту
<script type="text/javascript">
function setCookie (name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie (name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset);
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
if (setStr == 'false') {
setStr = false;
}
if (setStr == 'true') {
setStr = true;
}
if (setStr == 'null') {
setStr = null;
}
return(setStr);
}
document.getElementById('bookmarktag').onclick = function(event){
var clickX = event.clientX + document.body.scrollLeft;
var clickY = event.clientY + document.body.scrollTop;
document.getElementById('bookmark').style.height = clickY + 'px';
document.getElementById('bookmark2').style.marginTop = clickY + 'px';
document.getElementById('bookmarkdiv2').style.display = 'block';
document.getElementById('bookmarkdiv').style.display = 'none';
setCookie('bookmark_state', true);
}
function checkBookmark() {
if (getCookie('bookmark_state') == null) {
document.getElementById('bookmarkdiv').style.display = 'block';
}
if (getCookie('bookmark_state') == true) {
document.getElementById('bookmark').style.height = clickY + 'px';
document.getElementById('bookmark2').style.marginTop = clickY + 'px';
document.getElementById('bookmarkdiv2').style.display = 'block';
document.getElementById('bookmarkdiv').style.display = 'none';
}
}
</script>
1 ответ
Решение
Попробуйте это относительно документа
document.getElementById('someElement').onclick = function(event){
var clickX = event.clientX + document.body.scrollLeft;
var clickY = event.clientY + document.body.scrollTop;
document.getElementById('object').style.height = clickY + 'px';
}