Как получить ширину, где мышь щелкает div? - PullRequest
Новая
       1

Как получить ширину, где мышь щелкает div?

2 голосов
/ 30 марта 2020

Я хотел бы использовать HTML / CSS / JS, чтобы <div> изменил свой цвет только до определенной ширины. Эта определенная длина зависит от того, где она нажата внутри <div>.

Пример:

Picture of what I want

Я бы дал код, но он был бы просто <div>.
Я не знаю не знаю, как использовать CSS / JS, чтобы определить, где мышь щелкает по <div> (т.е. при каком размере ширины).

Ответы [ 4 ]

3 голосов
/ 30 марта 2020

Вы можете достичь этого, как это 

function changeWidth(event) {
  let outerDiv = document.getElementById('outerDiv');
  document.getElementById('innerDiv').style.width = event.clientX-outerDiv.offsetLeft+'px';
}
#outerDiv {
  width: 400px;
  height:200px;
  border: 1px solid black;
}
#innerDiv {
  width: 0px;
  height: 200px;
  background-color: red;
}
<div id = 'outerDiv' onclick = 'changeWidth(event)'>
  <div id = 'innerDiv' ></div>
</div>

Вы должны проверить положение внешнего ящика, который вы можете получить, используя el.offSetLeft

3 голосов
/ 30 марта 2020

Я бы хотел: 

//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, context)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  x.send();
}
post = function(url, send, success, context){
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('POST', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(send instanceof FormData){
      x.send(send);
    }
    else{
      const fd = new FormData;
      for(let k in send){
        fd.append(k, JSON.stringify(send[k]));
      }
      x.send(fd);
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
aC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.add(...a);
  return aC;
}
rC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.toggle(...a);
  return tC;
}
// you can ignore most of the above code (but it's useful, so keep it) - put below on a separate page on another load - except the load end
const block = I('block'), colorStyle = block.firstChild.style;
let down = false;
function colorIt(e){
  if(down)colorStyle.width = e.clientX-e.target.offsetLeft+'px';
}
function touchMode(){
  block.onmousedown = block.onmousemove = undefined;
  block.ontouchstart = e=>{
    down = true; colorIt(e.touches[0]);
  }
  block.ontouchmove = e=>{
    colorIt(e.touches[0]);
  }
}
function mouseMode(){
  block.ontouchstart = block.ontouchmove = undefined;
  block.onmousedown = e=>{
    down = true; colorIt(e);
  }
  block.onmousemove = colorIt;
}
block.onclick = ()=>{
  down = false;
}
if(mobile){
  touchMode();
}
else{
  mouseMode();
}
}); // load end
//]]>
/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%; background:#ccc;
}
.main{
  padding:10px;
}
#block{
  width:200px; height:75px; background:#fff; border:1px solid #000; cursor:pointer;
}
#block>div{
  width:0; height:100%; background:green;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='block'><div></div></div>
  </div>
</body>
</html>
1 голос
/ 30 марта 2020

Простой подход с использованием background-image для создания цвета. 

document.querySelector(".box").addEventListener("click", function(e){
  var position = e.clientX - this.getBoundingClientRect().left;
  this.style.backgroundImage = "linear-gradient(90deg, red " + position + "px, transparent " + position + "px)";
});
.box {
  border: 2px solid #c3c3c3;
  height: 200px;
  width: 400px;
}
<div class="box"></div>

e.clientX - это позиция относительно окна. Таким образом, вы можете использовать левую позицию деления из .getBoundingClientRect().left и вычесть ее, чтобы получить точную позицию щелчка.

Если вам это нужно для работы с несколькими делениями:

1) Добавить встроенный onclick для каждого <div>

function colourBackground (e, div) {
  var position = e.clientX - div.getBoundingClientRect().left;
  div.style.backgroundImage = "linear-gradient(90deg, red " + position + "px, transparent " + position + "px)";
};
.box {
  border: 2px solid #c3c3c3;
  height: 200px;
  width: 400px;
}
<div class="box" onclick="colourBackground(event, this)"></div>
<div class="box" onclick="colourBackground(event, this)"></div>
<div class="box" onclick="colourBackground(event, this)"></div>

или 2) Используйте forEach l oop, чтобы добавить событие нажатия для каждого <div>

document.querySelectorAll(".box").forEach(function(div) {
  div.addEventListener("click", function(e){
    var position = e.clientX - div.getBoundingClientRect().left;
    div.style.backgroundImage = "linear-gradient(90deg, red " + position + "px, transparent " + position + "px)";
  });
})
.box {
  border: 2px solid #c3c3c3;
  height: 200px;
  width: 400px;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
0 голосов
/ 30 марта 2020

Интересный вопрос.

Во-первых, используйте это, чтобы определить местонахождение вашего div: { ссылка }

Затем выберите положение мыши при нажатии: { ссылка }

Теперь, когда вы можете сказать, где находится ваш div и где находится ваша мышь, когда вы щелкаете, вы сможете определить, щелкаете ли вы внутри div или нет. Затем нужно применить Y-положение мыши к элементу div и использовать его для информирования об изменении цвета.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...