Вопросы CSS, JS по (1) улучшению кода JS с помощью CSS и (2) удалению синих пунктирных границ вокруг гиперссылок изображений

Question

div.img
{   
    margin:7px;
    border:3px solid gray;
    height:110px;
    width:110px;
    float:left;
    text-align:center;
}   


div.img img 
{   
    display:inline;
    margin:3px;
    border:1px solid white;
}   


div.img a:hover img 
{   
    border:3px solid yellow;
}   


function handleMouseClick(imageName)
{
    document.getElementById(imageName).style.borderWidth = '3';
    document.getElementById(imageName).style.borderStyle = 'solid';
    document.getElementById(imageName).style.borderColor = 'yellow';
}

У меня есть вставленный выше код JS и CSS, который отображает изображения границ с границами и изменяет границу изображения при щелчке мышью на «3px solid yellow». Этот код работает, как и ожидалось, но я хотел бы знать, есть ли лучший способ сделать это через CSS вместо кода JS, который есть в handleMouseClick (...).

Во-вторых, когда я выбираю свое изображение, граница изображения меняется, как ожидается, на «3px solid yellow», но поскольку элемент img является дочерним для «<a href...> </a>», я также вижу пунктирную синюю рамку вокруг изображения. Как избавиться от синей границы?

Answer 1

Значение CSS outline. Используйте

a:active {outline: none;}

чтобы удалить контур.

Answer 2

да, люди все еще используют DOM?

Вместо этого используйте jquery:

//CSS:
.selected {
 border:3px solid yellow;
}

//Java Script
$("#myImgId").click(function(){
  $(this).addClass("selected");
});

Answer 3

Самый простой способ манипулировать стилями в js - это установить атрибут класса. В вашем случае, определите класс в CSS, чтобы у него была пунктирная граница, и установите его с помощью js при обнаружении щелчка мыши. Я совсем не получил второй вопрос

Answer 4

Несколько вопросов здесь:

1. Ваш тег <A> действительно является якорем? Это ведет к чему-то? Если нет, то вы, вероятно, не хотите / не нужно оборачивать <IMG> в якорь.
2. Как указывалось в предыдущем ответе, вы, вероятно, захотите использовать классы CSS.

Пример слияния этих предложений приведен здесь:

<style type="text/css">
  img.myimage {
    border: 3px solid blue; /* assuming you want the blue border by default */
    cursor: pointer; /* Hint the user that the image may be clicked */
  }
  img.myimage-clicked {
    border: 3px solid yellow;
  }
</style>
<script type="text/javascript">
  function handleMouseClick() {
    document.getElementById("whatever").className = "myimage-clicked";
  }
</script>
...
<img id="whatever" src="" class="myimage" onclick="handleMouseClick()">

Answer 5

Вы можете изменить свой div.img a:hover img, чтобы подать заявку на дополнительный случай

div.img a:hover img, div.img img.selected
{   
    border:3px solid yellow;
} 

и затем просто добавьте selected с javascript при нажатии ..

function handleMouseClick(imageName)
{
    document.getElementById(imageName).className  = 'selected';
}